.keyboard{
	background-image: url("../images/home/architect-keyboard-480.jpg");
}

h2.home-title {
	font-size: 20px;
	line-height: 26px;
	color:#fff;
	background-color: #dd8802;
/*	margin: 30px auto 30px auto;*/
	padding: 6px 8px 6px 8px!important;
	text-align: center;
	width: 360px;
	display: block;
	box-shadow: 8px 8px 15px rgba(0,0,0, 0.4);
		text-shadow: 1px 1px 3px rgba(0,0,0, 0.3);
	}

h3.homeintro{
	margin: 30px auto 30px auto;
font-size: 30px;
line-height: 35px;
text-shadow: 10px 10px 32px rgba(0,0,0, 0.5);
color:#fff;
width:100%;
padding:0px 25px 20px 25px;
text-align: center;
}

h3{
font-size: 30px;
line-height: 35px;
text-shadow: 10px 10px 32px rgba(0,0,0, 0.5);
color:#fff;
width:100%;
padding:0px 25px 20px 25px;
text-align: center;
}

h3.subhead{
font-size: 30px;
line-height: 35px;
font-weight: 600;
text-shadow: none;
color:#50545a;
/*width:100%;*/
padding:0 0 0 0;
text-align: left !important;
}

h4{
font-size: 22px;
line-height: 27px;
font-weight: 700;
color:#50545a;
width:100%;
text-align: center;
padding:25px 0 25px 0;
}
h4.left{
font-size: 22px;
line-height: 27px;
font-weight: 700;
color:#50545a;
width:100%;
text-align: left !important;
padding:5px 0 25px 0 !important
}

h4.intro{
text-align: left !important;
}

h5{
font-size: 32px;
line-height: 37px;
color:#fff;
width:100%;
padding:0 0 10px 0;
}

h5.sub{
font-size: 20px;
line-height: 25px;
color:#EFCD97;
width:100%;
}

h5.design{
background-color:#1C3852;
padding: 50px;
margin-top: 50px;
}

h6{
font-size: 20px;
line-height: 25px;
height: auto;
color:#fff;
width:100%;
text-align: center;
}

/* ---- header phone number --- */
.phone-container {
		position: relative;
		width: 100%;
		max-width: 1750px;
}
.phone-wrap {
		position:absolute;
  top: -90px;
  right: 20px;
  width: auto;
	}
.phone-header {
	font-size: 17px;
	line-height: 21px;
	font-weight: 500;
	color: #f6a11d;
	}
	
a.phone-header, a.phone-header:hover{
text-decoration: none !important;
color:#f6a11d !important;
cursor: default !important;
}
/* ---- end header phone number --- */




.flex-container{
 display: flex;
min-height: 0;
flex-direction: column;
}


.flex-container > div.one, 
.flex-container > div.two,
.flex-container > div.three,
.flex-container > div.four,
.flex-container > div.full{
width:100%;
position: relative;
display: flex;
flex-direction: column;
}

.flex-container > div.one.home-promo{
width:100%!important;
padding: 10px 30px 30px 30px;
}

.flexstart{
align-items: flex-start;
}

.column{
padding:15px 30px 15px 30px;
} 
.column1{
padding:25px 50px 25px 50px;
}

.column2{
padding:50px 50px 50px 50px;
}

.ButtonContainer{
width:90%;
margin-left: auto;
margin-right: auto;
text-align: center;
padding-bottom: 25px;
}



.spacer20 {	padding: 20px 0 20px 0;}

.Box1{
display: block;
padding: 10px 10px 10px 10px;
}

button.boxtext a:link, button.boxtext a:active, button.boxtext a:visited, button.boxtext a:focus{
text-decoration: none;
width: 220px;
font-weight: 500;
  background-color: #1C3852;
  display: block;
  color: #fff;
  font-size: 16px;
  padding: 8% 8% 8% 8%;
border: 1px solid #fff;
}

button.boxtext a:hover{
background-color: #CFD2D5;
  color: #1C3852;
  border: 1px solid #1C3852;
}	
	
	
	button.boxtext-full a:link, button.boxtext-full a:active, button.boxtext-full a:visited, button.boxtext-full a:focus{
text-decoration: none;
width: 300px !important;
font-weight: 500;
  background-color: #1C3852;
  display: block;
  color: #fff;
  font-size: 16px;
  padding: 20px 10px;
border: 1px solid #fff;
}

button.boxtext-full a:hover{
background-color: #DD8802;
  color: #fff;
  border: 1px solid #fff;
}
	
	
/*Button overlay effect styles*/
.OverlayContainer{
    position: relative;
    width: 100%;
    background-color: #0c1722;
}

.overlay{
opacity: 0.9;
}

.middle {
  width:100%;
  display: block;
  transition: .3s ease;
  opacity: 1;
  position: absolute;
  top:50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.OverlayContainer:focus .overlay{
opacity: 0.5;
cursor: default;
}

.OverlayContainer:focus .middle{
  opacity: 1;
  cursor: pointer;
}

.button-cont {
margin-top: auto;
align-self: center;
margin-bottom: 25px;
}
 

button.topbutton a{
  font-size: 18px !important;
  font-weight: 500;
}

.imageholder{
position: relative;
display: block;
}

img.icc{
position: absolute;
bottom:10px;
right:10px;
width:80px;
}

img.icc-es-benefits{
width:50%;
margin-bottom: 25px;
margin-right: 25%;
margin-left: 25%;
}

img.show{
	width:80%!important;
	margin-top: 0%;
	margin-bottom: 15px;
}

img.event{
float: none; padding:0 0 0 0; display: block;
}

@media screen and (max-width: 320px){
h2.home-title {
	font-size: 20px;
	line-height: 26px;
	width: auto;
	}
h3{
font-size: 22px;
line-height: 30px;
}

}


@media screen and (min-width: 471px){
/* ---- header phone number --- */
.phone-wrap {
  top: -105px!important;
	}
	/* ---- end header phone number --- */
}

@media screen and (max-width: 470px){

/* ---- header phone number --- */
.phone-wrap {
  top: -90px!important;
	}
/* ---- end header phone number --- */
}


@media screen and (min-width: 640px){

img.icc-es-benefits{
width:40% !important;
margin-top:0 !important;
margin-bottom: 25px;
margin-right: 30%;
margin-left: 30%;
padding:0 0 0 0 !important;
box-sizing: content-box !important;
}



}

@media screen and (min-width: 768px){
/* ---- header phone number --- */
.phone-wrap {
  top: -110px!important;
	}
	/* ---- end header phone number --- */

img.show{
	width:90%!important;
	margin-top: 5%;
	margin-bottom: 25px;
}	
.keyboard{
	background-image: url("../images/home/architect-keyboard-768.jpg");
}

.Box1{
display: inline-block;
}

h3{
padding:0px 25px 25px 25px;
}
h5.sub{
height: 40px;
}

h6{
height:75px;
padding-top: 10px;
}

.flex-container{
box-sizing: border-box;
flex-direction: row;
}






.flex-container > div.one{
width:33.33%;
}

.flex-container > div.two{
width:50%;
}

.flex-container > div.three{
width:75%;
}

.flex-container > div.full{
width:100%;
}

img.icc-es-benefits{
width:90%!important;
margin-top:50px !important;
margin-bottom: 0 !important;
margin-right: 5% !important;
margin-left: 5%!important;
}

img.event{
display: block;
float: left; padding:0 25px 50px 0;
}
}


@media screen and (max-width: 767px){

/* ---- header phone number --- */
.phone-header {
font-size: 20px;
line-height: 24px;
	}
/* ---- end header phone number --- */
}

@media screen and (min-width: 870px){

.flex-container > div.one.home-promo{
width:50%!important;
padding: 10px 30px 40px 30px;
}
}

@media screen and (min-width: 1085px){

/*.flex-container > div.one.home-promo{
width:50%!important;
background-color: hotpink!important;
}*/

/* ---- header phone number --- */
.phone-wrap {
  top: 15px!important;
	}
/* ---- end header phone number --- */

.keyboard{
	background-image: url("../images/home/architect-keyboard.jpg");
}

.Box1{
display: inline-block;
padding: 50px 10px 10px 10px;
}

h2.home-title {
	font-size: 26px;
	line-height: 36px;
	background-color: #dd8802;
/*	margin: 280px auto 10px auto;*/
	padding: 6px 8px 6px 8px!important;
	text-align: center;
	width: 500px;
	display: block;
	box-shadow: 8px 8px 15px rgba(0,0,0, 0.4);
	text-shadow: 1px 1px 3px rgba(0,0,0, 0.3);
	}


h3{
font-size: 42px;
line-height: 45px;
text-shadow: 10px 10px 32px rgba(0,0,0, 0.5);
padding:30px 25px 0 25px;
}


h3.homeintro{
font-size: 42px;
line-height: 45px;
text-shadow: 10px 10px 32px rgba(0,0,0, 0.5);
padding:30px 25px 0 25px;
	margin: 280px auto 10px auto;
}

h4{
font-size: 25px;
line-height: 30px;
color:#50545a;
}

h5{
font-size: 40px;
line-height: 45px;
padding:0 0 10px 0;
}

h5.sub{
font-size: 25px;
line-height: 30px;
}

h6{
height:42px;
}

.flex-container{
 display: flex;
box-sizing: border-box;
}

.flexstart{
align-items:flex-start;
}

.justifycenter{
justify-content: center;
}



/*Button overlay effect styles*/
.overlay{
opacity: 1;
transition: .3s ease;
}

.middle {
  opacity: 0;
}

.OverlayContainer:hover .overlay{
opacity: 0.5;
cursor: default;
}

.OverlayContainer:hover .middle{
  opacity: 1;
  cursor: pointer;
}
/*End*/
	
	button.boxtext-full a:link, button.boxtext-full a:active, button.boxtext-full a:visited, button.boxtext-full a:focus{
	text-decoration: none;
width: 350px !important;
font-weight: 500;
  background-color: #1C3852;
  display: block;
  color: #fff;
  font-size: 16px;
  padding: 20px 10px;
border: 1px solid #fff;
}

button.boxtext-full a:hover{
background-color: #DD8802;
  color: #fff;
  border: 1px solid #fff;
}
	
	
button.boxtext a:link, button.boxtext a:active, button.boxtext a:visited, button.boxtext a:focus{
text-decoration: none;
width: 220px;
font-weight: 500;
  background-color: #1C3852;
  display: block;
  color: #fff;
  font-size: 16px;
  padding: 8% 8% 8% 8%;
border: 1px solid #fff;
}

button.boxtext a:hover{
background-color: #CFD2D5;
  color: #1C3852;
  border: 1px solid #1C3852;
}	
	

/*button.boxtext a:link, button.boxtext a:active, button.boxtext a:visited, button.boxtext a:focus{
  font-size: 16px;
}*/

button.topbutton a{
  font-size: 22px !important;
  font-weight: 500;
}

img.icc-es-benefits{
width:70%!important;
margin-top:50px !important;
margin-bottom: 0 !important;
margin-right: 15% !important;
margin-left: 15% !important;
}

}

@media screen and (min-width: 1285px){
/* -- header phone number --- */
.phone-wrap {
  top: 20px!important;
	}
	/* - end header phone */
}