@import url(https://fonts.googleapis.com/css?family=Lato);
@font-face {
    font-family: 'bitter_bold';
    src: url('fonts/bitter-bold-webfont.woff2') format('woff2'),
         url('fonts/bitter-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'bitterbold_italic';
    src: url('fonts/bitter-bolditalic-webfont.woff2') format('woff2'),
         url('fonts/bitter-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'bitter_italic';
    src: url('fonts/bitter-italic-webfont.woff2') format('woff2'),
         url('fonts/bitter-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'bitter_regular';
    src: url('fonts/bitter-regular-webfont.woff2') format('woff2'),
         url('fonts/bitter-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'alfa_slab_oneregular';
    src: url('fonts/alfaslabone-regular-webfont.woff2') format('woff2'),
         url('fonts/alfaslabone-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#cpcBackground {
	width: 100%;
	height: 100vh;
	position: fixed;
	z-index: 0;
	background-image: url('../images/cpc-sky2.png');
	background-repeat:repeat-x;}
#cpc-border {
	width: 100%;
	height: 15px;
	background-color: #1a335e;}

.cpcCloudContainer1{
	position: fixed;
	z-index: 2;}
.cpcCloudContainer2{
 	height:50vh;
	display: flex;
	align-items: center;
	min-height: 24em;
	justify-content: center;}
.cpcCloudContainer3{flex: 1;}

#cpcContainer {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	max-width: 1000px;}
#cpcArtworkBox {padding-top:20px;}
#cpcArtwork {
	position: relative;
	z-index: 20;
	max-width: 95%;
	min-width: 320px;
	margin: auto;}
#cpcLinks {
	position:relative;
	z-index: 30;
	text-align: center;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	padding: 50px;}

#cpcLinks a {margin: 0 10px;font-family:"bitter_regular","Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";}

#cpcBuildings {
	z-index: 0;
	height: 175px;
	width: 100%;
	margin:0;
	padding:0;
	position:fixed;
    bottom:0px;
	left: 0px;
	background-image: url(../images/cpcHouses2.png);
	background-repeat: repeat-x;}

.cpcText {
	text-align: center;
	padding: 0 60px 0 50px;}
.cpcText p {padding:40px 30px 10px 30px;}
.cpcText h3 {padding:20px 30px 0px 30px;}

#cpcPhoneBooth {
	position: relative;
	bottom:30px;}

#cpcPhone {
	color:#147612;
	-webkit-text-stroke: 1px #fff;
	-webkit-text-fill-color: #147612;
	text-shadow: 2px 2px 10px black;
	text-shadow: -1px -1px 2px #fff, 1px 1px 2px #000;
	text-decoration: none;
	font-size: 7.7vw;}

p {
	font-family:"bitter_regular","Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	text-align: left;}

.cpcBoldText {font-weight: bold;}

.cpcParagraph {
	font-family:"bitter_regular","Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-weight:normal;
	font-size: 16px;
	color:#000;}

a {text-decoration: none;}
h3 {text-align: left;}
.cpcGreen {color:#147612;}
.cpcBlue {color:#1a335e;}
.cpcYellow {color:#ffcc00;}

*, *:before, *:after{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: "bitter_bold","Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";}

.cpcLineSpace {margin-bottom: 10px;}
.cpcIndent {margin-left: 35px;}

.cpcBulletList {
	display: inline;
	width:500px;
	margin-right: 5%;
}
.cpcBulletList ul {
	list-style-type:square;
	text-align: left;
	padding:20px 30px 0px 80px;}
.cpcBulletList ol li {font-family:"bitter_regular","Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";}
.cpcBulletList ol {
	text-align: left;
	padding:20px 30px 0px 60px;
	/* Using counter-increment to make numbers bold */
	margin: 0 0 1.5em;
	counter-reset: item;}
.cpcBulletList ol > li {
	margin: 0;
	padding: 0 0 0 2em;
	text-indent: -1em;
	list-style-type: none;
	counter-increment: item;}
.cpcBulletList ol > li:before {
	display: inline-block;
	width: 1em;
	padding-right: 0.5em;
	font-weight: bold;
	text-align: right;
	content: counter(item) ".";}

.cpcQuoteContainer {
    padding-right:15px;
    padding-left: 15px;}
.cpcQuoteContainer p {
    font-family: 'Caveat', cursive;
    font-size: 26px;
    color:#4F4F4F;
    margin-top:0px;
    padding-top:15px;}
.cpcQuote {
    padding-left: 30px;
    padding-bottom: 0px;
    margin-bottom:0px;}
.cpcQuoteContainer p.cpcSource {
    font-size: 24px;
    padding-top:0px;
    text-align: right;
    margin-top: 0px;
    white-space: nowrap;}

/*********** Navigation */

nav{
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	}
nav ul{
	list-style: none;
	position: relative;
	display: inline-table;}
nav ul li{
	background: #1a335e;
	/*float: right; */
	display: inline-block;
    transition: all .2s ease-in-out;}
nav ul li:hover{
	text-shadow:  2px 2px 8px #1a335e;
	background: rgba(0,0,0,.15);}
nav ul li:hover > ul{display: block;}

nav ul li a{
	display: block; 
	padding: 15px 15px;
	color: #fff; 
	font-size: .9em;
	letter-spacing: 1px;
	text-decoration: none;
	text-transform: uppercase;}   
nav ul ul{
	display: none;
	background: #fff;
	position: absolute; 
	top: 100%;
	box-shadow: -3px 3px 10px -2px rgba(0,0,0,.1);
	border: 1px solid rgba(0,0,0,.1);}

nav ul ul li{float: none; position: relative;}

nav ul ul li a {
	padding: 15px 30px; 
	border-bottom: 1px solid rgba(0,0,0,.15);}
nav ul ul ul {
	position: absolute; 
	left: 100%; 
	top:0;}

.cpcNav {
	color:#fff;
	transition: color 500ms;}
.cpcHighlight {
	background: #0f6939;
	color:#fff;
	transition: color 1000ms;
	-webkit-animation: cpcHighlightColor 5s infinite; /* Chrome, Safari, Opera */
    animation: cpcHighlightColor 5s infinite;}
.cpcNav:hover {
	color:#ffdd00;
	text-shadow: 2px 2px 8px #1a335e, -2px 2px 8px #1a335e; }
.cpcHighlight:hover {color:#ffdd00;}

@-webkit-keyframes cpcHighlightColor {  /* Chrome, Safari, Opera */
    50% {background-color: #147612;
		text-shadow: 2px 2px 8px #0a4727, -2px 2px 8px #0a4727;}
}

@keyframes cpcHighlightColor {  /* Standard syntax */
    50% {background-color: #147612;
		text-shadow: 2px 2px 8px #0a4727, -2px 2px 8px #0a4727;}
}


/*********** Contact Form  */

/* Style inputs */
input[type=text], select, textarea {
    width: 100%;
	padding: 10px;
	margin-top: 3px;
	margin-bottom: 3px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: vertical;}

input[type=submit] {
    border-radius: 5px;
    background-color: #4CAF50;
    color: white;
    padding: 8px 15px;
    margin-top: 5px;
    border: none;
    cursor: pointer;}

input[type=submit]:hover {background-color: #45a049;}

.cpcFormContainer {
	float: right;
	max-width: 200px;
    border-radius: 5px;
    background-color: #f2f2f2;
	box-shadow: 0px 0px 20px -2px rgba(0,0,0,.6);
    padding: 5px;
    margin-bottom:175px;
	margin-left: 30px;}
.cpcFormContainer h2 {
	line-height: 98%;}
#largeform .cpcFormContainer {
	max-width: 500px;
	float:none;
	margin:30px auto 0 auto;
}
#largeform .cpcFormContainer h2 {
	padding:10px 0 10px 0;
	font-size: 2em;
}
.cpcFormColumn {
    text-align: center;
	display: inline-block;
	width: 100%;}
.cpcFormRow {
	width: 100%;
	text-align: center;
	margin: auto;}

#cpcSocial p {
    font-size: .9em;
    color:#1a335e;
    text-align: center;
    padding:15px 10px 15px 10px;}
#cpcSocial p a {
    padding-left: 8px;
}
#cpcSocial img {
    position: relative;
    top:9px;
}

/*********** Medias */

@media only screen and (min-width: 939px) {
    #cpcPhone {font-size: 4.5em;}
}
@media only screen and (max-width: 875px) {
    .cpcFormContainer {margin-bottom: 50px;}
}
@media only screen and (max-width: 693px) {
    #cpcArtwork {padding-top: 0px;}
	#cpcPhone {padding: 0 20px;}
	.cpcText {padding: 0 30px 0 20px;}
	#largeform .cpcFormContainer {margin-top:50px;}
}	
@media only screen and (max-width: 520px) {
    #cpcPhone {font-size: 2.7em;}
    .cpcQuoteContainer {
    padding-right:5px;
    padding-left: 5px;}
	.cpcFormContainer {
		max-width: 250px;
		margin: 45px auto 15px auto;
		float:none;}
	.cpcText{
		padding-left: 10px;
		padding-right:10px;}
}