@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);
html, body, html * {font-family: 'Roboto', sans-serif;}

* {box-sizing: border-box;}
body {margin: 0; background-image: url('https://randolphpenna.com/files/rpfade.svg');  background-repeat: no-repeat;  background-attachment: fixed;  background-size: cover; }
.top_container {width:100%;background-color:#f1f1f1;padding:5px;font-family:'Roboto',sans-serif;text-align:center;text-shadow: .5px .5px grey;transition: all 0.4s;background-image: url('https://randolphpenna.com/files/bgx1.jpg');background-repeat: no-repeat;background-size: 100% ;}
.head_container {width: 100%;padding:5px 5px;background: #555;color: #f1f1f1;text-align: center;text-shadow: 1px 1px grey; box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 8px 20px 0 rgba(0, 0, 0, 0.19); }


.content {max-width: 600px;  padding: 10px 10px 10px 10px; margin: auto;}
.panel_container {background-color:#f1f1f1;padding:10px; box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2), 0 8px 20px 0 rgba(0, 0, 0, 0.19); font-family:'Roboto',sans-serif;}
 section{max-width: 600px; }
.panel_default  {font-family:'Roboto',sans-serif;max-width: 600px;  height: 260px;   margin: 1em 0;   border: 3px solid #CCCCCC; border-radius: 10px; background-color: white; padding: 10px 10px 10px 20px;}
.panel_contact {font-family:'Roboto',sans-serif;max-width: 600px;  height: 600px;   margin: 1em 0; border: 3px solid #CCCCCC; border-radius: 10px; background-color: white; padding: 10px 10px 10px 10px; }
.panel_long {font-family:'Roboto',sans-serif;max-width: 600px;  height: 100%;    margin: 1em 0;  border: 3px solid #CCCCCC; border-radius: 10px; background-color: white; padding: 10px 10px 10px 10px;}
.imageleft {padding:.5em;float:left;}
.imageright {padding:.5em;float:right;}
@media screen and (max-width: 800px) {.content {width: 100%; }.panel_default{max-width: 500px; height: 520px;  margin: 2em 0;}
.panel_contact {max-width: 500px; height: 600px;  margin: 2em 0;}.imageleft { float:none;}.imageright { float:none;}}
a { display:block; }
a.button1{display:inline-block; padding:0.35em 1.2em; border:0.1em solid #CCCCCC; margin:0 0.3em 0.3em 0; border-radius:0.12em; box-sizing: border-box; text-decoration:none;  color:#FFFFFF; text-align:left; transition: all 0.2s;  font-weight: bold;}
a.button1:hover{ color:#333333; background-color:#FFFFFF;}
.button  {display: inline-block;-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; cursor: pointer;  padding: 10px 20px;  border: 1px solid #018dc4;  -webkit-border-radius: 3px;  border-radius: 3px;  font: normal 16px/normal Tahoma, Geneva, sans-serif;  color: rgba(255,255,255,0.9);  -o-text-overflow: clip;  text-overflow: clip;  background: #0199d9;  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;  text-shadow: -1px -1px 0 rgba(15,73,168,0.66) ;  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);}
.cssbutton1 {display: inline-block;box-sizing: content-box; cursor: pointer;  padding: 10px 20px;  border: 1px solid #018dc4; box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;  text-shadow: -1px -1px 0 rgba(15,73,168,0.66) ;  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);}

.cssfield1 {display: inline-block; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; padding: 10px 20px;  border: 1px solid #b7b7b7;  -webkit-border-radius: 3px;  border-radius: 3px; font: normal 16px/normal Tahoma, Geneva, sans-serif;  color: rgba(0,142,198,1);  -o-text-overflow: clip;  text-overflow: clip;  background: rgba(252,252,252,1);  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) inset;  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) inset;  text-shadow: 1px 1px 0 rgba(255,255,255,0.66) ;  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);}


.cssfield2 {display: inline-block;-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; padding: 10px 20px;  border: 1px solid #b7b7b7;  -webkit-border-radius: 3px;  border-radius: 3px; font: normal 16px/normal Tahoma, Geneva, sans-serif;  color: rgba(0,142,198,1);  -o-text-overflow: clip;  text-overflow: clip;  background: rgba(252,252,252,1);  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) inset;  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) inset;  text-shadow: 1px 1px 0 rgba(255,255,255,0.66) ;  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);}

.sticky {position: fixed;top: 0; width: 100%;}
.sticky + .content {padding-top: 100px;}   
.body_Footer {width: 100%;border: .5px;padding-top: 2px;padding-right: 2px;padding-bottom: 2px;padding-left: 2px;position:fixed;bottom:0;background-image: url('https://randolphpenna.com/files/bgx1.jpg');background-repeat: no-repeat;background-size: 100% ;}