@charset "UTF-8";



/* CSS Document */



/* Basic Layout */





.page {

	background-color: #FFFFFF;

	width: 100%;

	margin-left: 0%;

	margin-right: 0%;

	border-bottom-width: 0px;

	padding-left: 0px;

	padding-top: 0px;

	padding-right: 0px;

	padding-bottom: 0px;

	max-width: 1100px;	



}





.pic_banner {

	width: 100%;

	background-color: #FFFFFF;

	padding-top: 0px;

	padding-bottom: 0px;

	clear: left;

	border-bottom: 2px solid #FFFFFF;

}





.pic_main {

	width: 100%;

	background-color: #FFFFFF;

	padding-top: 0px;

	padding-bottom: 0px;

	clear: left;

	border-bottom: 2px solid #FFFFFF;

}









/* This is the navigation menu */



body {margin:0;}

ul.topnav {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

  background-color: #333;

}



ul.topnav li {float: left;}



ul.topnav li a {

  display: inline-block;

  color: #f2f2f2;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

  transition: 0.3s;

  font-size: 17px;

font-family: Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial," sans-serif" 

}



ul.topnav li a:hover {background-color: #555;}



ul.topnav li.icon {display: none;}





.top_space {

	background-color: #ffffff;

	width: 100%;

	padding-bottom: 15px;

}



.top-border {

    background-color: #ffffff;

	margin: 0px;

	height: 20px;

}



/* This is the flexbox container for both columns. */

.column-container {

	max-width: 1100px;

	height: auto;

	background-color: #ffffff;

	margin: 20px auto;



	/* FLEX PARENT PROPERTIES */

	display: flex;

	flex-wrap: wrap;

	justify-content: center;

}









/* This is the flexbox container for both columns. */



.column-container-media-query {

	max-width: 1100px;

	height: auto;

	background-color: #ffffff;

	margin: 20px auto;

    





	/* FLEX PARENT PROPERTIES */

	display: flex;

	flex-wrap: wrap;

	/* justify-content: center; */

    justify-content: center;

          

  }



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

  .column-container-media-query {

      display: block;





    

  }



    }

    





/* This is the flexbox container for both columns. */

.column-container-banner {

	max-width: 1100px;

	height: auto;

	background-color: #ffffff;

	margin: 20px auto;



	/* FLEX PARENT PROPERTIES */

	display: flex;

	flex-wrap: wrap;

	justify-content: center;

}





.column-single {

	margin: 0px;

    margin-left: 50px;

    margin-right: 50px;

	background-color: #ffffff;

	width: 900;

	height: auto;

	color: black;

	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";

	

}





.column-double {

	margin: 0px;

    margin-left: 50px;

    margin-right: 50px;

	background-color: #ffffff;

	width: 450px;

	height: auto;

	color: black;

	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";

	justify-content: center;

}





.column-double-wbz {

	margin: 0px;

    margin-left: 100px;

    margin-right: 100px;

	background-color: #ffffff;

	width: 250px;

	height: auto;

	color: black;

	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";

	justify-content: center;

}





.column-third {

	margin: 0px;

    margin-top: 50px;

    margin-left: 50px;

    margin-right: 50px;

	background-color: #ffffff;

	width: 250px;

	height: auto;

	color: black;

	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";

    

	

}









.column-bottom-border-container {

	

	height: auto;

	background-color: #286098;

	margin: auto;

    color: white;

	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";

    text-align: center;





	/* FLEX PARENT PROPERTIES */

	display: flex;

	flex-wrap: wrap;

	justify-content: center;

   

}





.bottom-border-double {

    background-color: #286098;

    margin-top: 0px;

	margin: 0px;

    margin-right: 0px;

    margin-left: 0px;

	height: auto;

	color: white;

    width: 350px;

	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";

    text-align: left;



} 

    

.bottom-border-double  a:link { color: white; }

.bottom-border-double a:visited { color: lightblue; } 

.bottom-border-double a:hover  { color: yellow; } 



    

    

}

}



.video-container {

position: relative;

margin: 0px;

width: 400px;

height: auto;



    

}



.main-fullpage-text {

	margin: 20px;

	width: 900px;

	height: auto;

	color: black;

	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";

	font-size: 24px;	

}



/* The text column has a size of 300px, but flexbox allows it to grow to fill the space. once it reaches 300px, it cannot shrink so the flexbox wraps the content, createing a vertical layout. If you change this number the media query must be adjusted accordingly. */















.head-column-one {

	margin: 0px;

    margin-left: 20px;

    margin-right: 20px;

	background-color: #ffffff;

	width: 600px;

	height: auto;

	color: black;

	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";

    

    }





.head-column-one-larger {

	margin: 0px;

    margin-left: 20px;

    margin-right: 20px;

	background-color: #ffffff;

	width: 450px;

	height: auto;

	color: black;

	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";

    

    }



.head-column-two {

	margin: 0px;

    margin-left: 20px;

    margin-right: 20px;

	background-color: #ffffff;

	width: 350px;

	height: auto;

	color: black;

	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";





	

}









.column-full-width {

	margin: 0px;

    margin-left: 0px;

    margin-right: 0px;

	background-color: #ffffff;

	width: 1100px;

	height: auto;

	color: black;

	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";

    





}





.column-full-width-mp {

	margin: 0px;

    margin-left: 20px;

    margin-right: 20px;

	background-color: #ffffff;

	width: 1100px;

	height: auto;

	color: black;

	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";

    





}













 .button {



    font-size: 22px;

    color: white;

    background: crimson;

    border: 2px solid rgb(37, 34, 34);

    border-radius: 10px;

    padding-top: 10px;

    padding-bottom: 10px;

    padding-right: 10px;

    padding-left: 10px;

 }



/* The image column stays at the same size, and it is its own flexbox too - containing the images. Flexbox within a flexbox. */





.main-text-left {

	margin: 20px;

	background-color: #ffffff;

	width: 500px;

	height: auto;

	color: black;

	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";

	

}



.main-image-right {

	margin: 20px;

	background-color: #ffffff;

	width: 500px;

	height: auto;

	color: black;

	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";



	

}













}

.video-container {

position: relative;

margin: 20px;

width: 400px;

height: auto;

 



    

}



.sub-column-right-pic {

	margin: 25px;

	width: 300px;

	height: auto;

	background-color: #ffffff;



    

}



.sub-column-right-pic-larger {

	margin: 25px;

	width: 500px;

	height: auto;

	background-color: #ffffff;



    

}







.column-image {

	margin: 20px;

	width: 300px;

	height: auto;

	background-color: #ffffff;

	

	/* FLEX CHILD PROPERTIES */

	flex-grow: 0;

	

	/* FLEX PARENT PROPERTIES */

	display: flex;

	justify-content: flex-start;

	flex-direction: column;

}



.column-image-main-only {

	margin: 20px;

	width: 300px;

	height: auto;

	background-color: #ffffff;

	

	/* FLEX CHILD PROPERTIES */

	flex-grow: 0;

	

	/* FLEX PARENT PROPERTIES */

	display: flex;

	justify-content: flex-start;

	flex-direction: column;

    

}













/* style for resigning video box wrapper */











.video-container {

position: relative;

margin: 20px;





}





    

    

.small-pic-inline-right {

	margin: 0px;

    margin-left: 20px;

	width: 250px;

	height: auto;

	background-color: #ffffff;



    

}



.small-pic-inline-portrait-left {

	margin: 0px;

    margin-right: 20px;

	width: 200px;

	height: auto;

	background-color: #ffffff;



    

}











.pm-logo {

	margin: 20px;

    margin-left: 10px;

	width: 250px;

	height: auto;

	background-color: #ffffff;

	

	/* FLEX CHILD PROPERTIES */

	flex-grow: 0;

	

	/* FLEX PARENT PROPERTIES */

	display: flex;

	justify-content: flex-start;

	flex-direction: column;

    

    }





img {

	width: 100%;

	height: auto;

	margin-bottom: 0px;



	/* FLEX ITEM PROPERTIES */

	flex-grow: 1;

}







.socialmedia_logo {

align-items: center;

padding-bottom: 0px;

padding-right: 10px;

padding-left: 10px;

width: 70px;



	

}







.socialmedia_text {

align-self: center;	

color: black;

font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";

	

}







.bottom_copyright {

	background-color: #286098;

	width: 100%;

	padding-bottom: 15px;

	padding-top: 15px;

	font-family: "Arial";



}



/* Media Queries */



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

  ul.topnav li:not(:first-child) {display: none;}

  ul.topnav li.icon {

    float: right;

    display: inline-block;

  }

}



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

  ul.topnav.responsive {position: relative;}

  ul.topnav.responsive li.icon {

    position: absolute;

    right: 0;

    top: 0;

  }

  ul.topnav.responsive li {

    float: none;

    display: inline;

  }

  ul.topnav.responsive li a {

    display: block;

    text-align: left;

  }

}





/* 780 pixels is the width at which the flexbox automatically wraps the content into a vertical layout. So, once the screen reaches 780 pixels, the image column changes properties so it fits the width of the page. */

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

	







	

}



	



	

.facebook_logo {

align-self: center;

width: 50px;



}

	



	

.pic_banner {

content:url(../images/pic_banner_mobile.jpg);



align-self: center;

width: 50%;

	

}

	



}