@charset "UTF-8";

@font-face {
  font-family: "petersen";
  src:url("/fonts/petersen.eot");
  src:url("/fonts/petersen.eot?#iefix") format("embedded-opentype"),
    url("/fonts/petersen.woff") format("woff"),
    url("/fonts/petersen.ttf") format("truetype"),
    url("/fonts/petersen.svg#petersen") format("svg");
  font-weight: normal;
  font-style: normal;

}

[data-icon]:before {
  font-family: "petersen" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "petersen" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


body, button
{font-size:14px;line-height:1.4;
font-family:museo-slab,serif;
background:#d5d6d6;
background:-moz-radial-gradient(center,ellipse cover,#d5d6d6 54%,#7d8183 100%);
background:-webkit-radial-gradient(center,ellipse cover,#d5d6d6 54%,#7d8183 100%);
background:radial-gradient(ellipse at center,#d5d6d6 54%,#7d8183 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5d6d6', endColorstr='#7d8183',
 GradientType=1 )

 }
 
 
  
#cookie-bar {background:#111111; padding: 4px; height:auto; line-height:24px; color:#eeeeee; text-align:center; padding:8px;}
#cookie-bar.fixed {position:fixed; top:0; z-index: 10;left:0; width:100%;}
#cookie-bar.fixed.bottom {
border-top: 1px solid #dc2440; bottom:0; top:auto;}
#cookie-bar p {color: #ccc; margin:0; padding:0;}
#cookie-bar a {color:#ffffff; display:inline-block; border-radius:3px; text-decoration:none; padding:0 6px; margin-left:8px;}
#cookie-bar .cb-enable {background:#dc2440;}
#cookie-bar .cb-enable:hover {background:#7e7e7e;}
#cookie-bar .cb-disable {background:#990000;}
#cookie-bar .cb-disable:hover {background:#bb0000;}
#cookie-bar .cb-policy {background:#2b2b2b; color: #8a8a8a;}
#cookie-bar .cb-policy:hover {background:#5a5a4e; color: #eee;}



 
div.map {
    display: block;
    width: 100%;
    height:300px;
    margin-bottom: 40px;    
}
.cmsmap {
    width: 100%;
    height:300px;
}
.cmsmap img {
    max-width: none;
}
 

#form1_search input#form1_q {
  width: 240px;
  float: left;
    height: 28px;
}

#form1_search input {
  width: 30px;
  float: left;
  border: 0px;
  padding: 4px;
    height: 28px;
}

#form2_search input#form2_q {
  width: 240px;
  float: left;
    height: 28px;
}

#form2_search input {
  width: 30px;
  float: left;
  border: 0px;
  padding: 4px;
    height: 28px;
}


 .noshow {
   display: none;
 }

.testimonialarea {

  float: left;
  font-style: italic;
  width: 100%;
  background-color: #333;
  padding: 24px;
  padding-left: 80px;
  padding-right: 80px;
  color: #eee;
}


#prevnext {
  float: left;
  width: 100%;
  padding: 24px;
  color: #eee;
  text-align: center;
}

.parallax-window {
    min-height: 440px;
    background: transparent;
    text-align: center;
}


#wrapper {

    padding-top: 100px;
}

section {

    clear: both;
    padding: 12px;
    text-align: center;
    float: left;
    width: 100%
}

.portfolioheader {
  position: relative;
  float: left;
  
}


.portfoliologo {
  position: absolute;
  width: 140px;
    top: -24px;
  right: 24px;
  -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);

  
}

.logoscroll {
  position: absolute;
  width: 140px;
    top: -24px;
  left: 24px;
  -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);

  
}

.portfoliologo img {
  width: 140px;
  -webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

  
}

.maindesc section {

  max-width: 600px;
  display:inline-block;
  float: none;
}

.petersengrey {background-color: #E2E2E2;}


.petersenred{background-color: #DC2440;
color: #eee;}

    .petersenblack {
background-color: #333;
color: #eee;
   
    }


    .petersengrey h2{color: #DC2440;}

        .petersenblack h2{color: #DC2440;}

.internaltext {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    padding-top: 32px;
    padding-bottom: 32px;
}

.internaltextwide{
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    padding-top: 32px;
    padding-bottom: 32px;
}


.internalpage {

  margin-top: 60px;
}

#websitecomingbox,#websitecomingbox img,h1{float:left;width:100%}body,h1,h2,h3,h4{margin:0;font-weight:300}


header{background:#2C2C2C;z-index:9999;position:fixed;}

footer {
  background:#2C2C2C;
}

#form1_bookingform {
    float: left;
    width: 50%;
    border: 1px solid #37AAAB;
    padding: 12px;
}
#form1_generalcontact {
    margin-left: auto;
    margin-right: auto;
    /* float: left; */
    width: 100%;
    /* border: 1px solid #ccc; */
    padding: 8px;
    padding-bottom: 50px;
    margin-bottom: 24px;
    max-width: 600px;
}

    #form1_stpetersformerclubimages

 {
    margin-left: auto;
    margin-right: auto;
    /* float: left; */
    width: 80%;
    border: 1px solid #ccc;
    padding: 32px;
    margin-bottom: 24px;
    }
input[type=month], input[type=week], input[type=email], input[type=number], input[type=search], input[type=tel], input[type=time], input[type=url], input[type=color], input[type=text], input[type=password], input[type=date], input[type=datetime], input[type=datetime-local], textarea {
    -webkit-appearance: none;
    border-radius: 0;
    background-color: #FFF;
    font-family: inherit;
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    color: rgba(0, 0, 0, .75);
    display: block;
    font-size: .875em;
    margin: 0em;
    padding: .5em;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    transition: all .15s linear;
}
input[type=month]:focus, input[type=week]:focus, input[type=email]:focus, input[type=number]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=time]:focus, input[type=url]:focus, input[type=color]:focus, input[type=text]:focus, input[type=password]:focus, input[type=date]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, textarea:focus {
    background: #fafafa;
    border-color: #999;
    outline: 0;
}
fieldset[disabled] input[type=month], fieldset[disabled] input[type=week], fieldset[disabled] input[type=email], fieldset[disabled] input[type=number], fieldset[disabled] input[type=search], fieldset[disabled] input[type=tel], fieldset[disabled] input[type=time], fieldset[disabled] input[type=url], fieldset[disabled] input[type=color], fieldset[disabled] input[type=text], fieldset[disabled] input[type=password], fieldset[disabled] input[type=date], fieldset[disabled] input[type=datetime], fieldset[disabled] input[type=datetime-local], fieldset[disabled] textarea, input[type=month]:disabled, input[type=month][disabled], input[type=month][readonly], input[type=week]:disabled, input[type=week][disabled], input[type=week][readonly], input[type=email]:disabled, input[type=email][disabled], input[type=email][readonly], input[type=number]:disabled, input[type=number][disabled], input[type=number][readonly], input[type=search]:disabled, input[type=search][disabled], input[type=search][readonly], input[type=tel]:disabled, input[type=tel][disabled], input[type=tel][readonly], input[type=time]:disabled, input[type=time][disabled], input[type=time][readonly], input[type=url]:disabled, input[type=url][disabled], input[type=url][readonly], input[type=color]:disabled, input[type=color][disabled], input[type=color][readonly], input[type=text]:disabled, input[type=text][disabled], input[type=text][readonly], input[type=password]:disabled, input[type=password][disabled], input[type=password][readonly], input[type=date]:disabled, input[type=date][disabled], input[type=date][readonly], input[type=datetime]:disabled, input[type=datetime][disabled], input[type=datetime][readonly], input[type=datetime-local]:disabled, input[type=datetime-local][disabled], input[type=datetime-local][readonly], textarea:disabled, textarea[disabled], textarea[readonly] {
    background-color: #DDD;
    cursor: default;
}
input[type=month].radius, input[type=week].radius, input[type=email].radius, input[type=number].radius, input[type=search].radius, input[type=tel].radius, input[type=time].radius, input[type=url].radius, input[type=color].radius, input[type=text].radius, input[type=password].radius, input[type=date].radius, input[type=datetime].radius, input[type=datetime-local].radius, textarea.radius {
    border-radius: 3px;
}
form .row .prefix-radius.row.collapse button, form .row .prefix-radius.row.collapse input, form .row .prefix-radius.row.collapse select, form .row .prefix-radius.row.collapse textarea {
    border-radius: 0 3px 3px 0;
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-top-right-radius: 3px;
}
form .row .postfix-radius.row.collapse button, form .row .postfix-radius.row.collapse input, form .row .postfix-radius.row.collapse select, form .row .postfix-radius.row.collapse textarea, form .row .prefix-radius.row.collapse .prefix {
    border-radius: 3px 0 0 3px;
    -webkit-border-bottom-left-radius: 3px;
    -webkit-border-top-left-radius: 3px;
}
form .row .postfix-radius.row.collapse .postfix {
    border-radius: 0 3px 3px 0;
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-top-right-radius: 3px;
}
form .row .prefix-round.row.collapse button, form .row .prefix-round.row.collapse input, form .row .prefix-round.row.collapse select, form .row .prefix-round.row.collapse textarea {
    border-radius: 0 1000px 1000px 0;
    -webkit-border-bottom-right-radius: 1000px;
    -webkit-border-top-right-radius: 1000px;
}
form .row .postfix-round.row.collapse button, form .row .postfix-round.row.collapse input, form .row .postfix-round.row.collapse select, form .row .postfix-round.row.collapse textarea, form .row .prefix-round.row.collapse .prefix {
    border-radius: 1000px 0 0 1000px;
    -webkit-border-bottom-left-radius: 1000px;
    -webkit-border-top-left-radius: 1000px;
}
form .row .postfix-round.row.collapse .postfix {
    border-radius: 0 1000px 1000px 0;
    -webkit-border-bottom-right-radius: 1000px;
    -webkit-border-top-right-radius: 1000px;
}
input[type=submit] {
    -webkit-appearance: none;
    /* border-radius: 0; */
}
textarea[rows] {
    height: auto;
}
textarea {
    max-width: 100%}
select {
    /* -webkit-appearance: none!important; */
    background-color: #FAFAFA;
    background-image: url(data:image/svg+xml;
    base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
    background-position: 100% center;
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
    padding: .5em;
    font-size: .875em;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    color: rgba(0, 0, 0, .75);
    line-height: normal;
    border-radius: 0;
    height: 2.3125em;
}
select::-ms-expand {
    display: none;
}
select.radius {
    border-radius: 3px;
}
select:hover {
    background-color: #f3f3f3;
    border-color: #999;
}
select:disabled {
    background-color: #DDD;
    cursor: default;
}
select[multiple] {
    height: auto;
}
input[type=file], input[type=checkbox], input[type=radio], select {
padding: 18px;
float: left;
    margin:0px;
    float: left;
}
input[type=checkbox]+label, input[type=radio]+label {
    display: inline-block;
    margin-left: .5em;
    margin-right: 1em;
    margin-bottom: 0;
    vertical-align: baseline;
}
input[type=file] {
    width: 100%}
fieldset {
    border: 1px solid #DDD;
    padding: 1.25em;
    margin: 1.125em 0;
}
fieldset legend {
    font-weight: 700;
    background: #FFF;
    padding: 0 .1875em;
    margin: 0 0 0 -.1875em;
}
[data-abide] .error small.error, [data-abide] .error span.error, [data-abide] small.error, [data-abide] span.error {
    display: block;
    padding: .375em .5625em .5625em;
    margin-top: -1px;
    margin-bottom: 1em;
    font-size: .75em;
    font-weight: 400;
    font-style: italic;
    background: #f04124;
    color: #FFF;
}
[data-abide] small.error, [data-abide] span.error {
    display: none;
}
small.error, span.error {
    display: block;
    padding: .375em .5625em .5625em;
    margin-top: -1px;
    margin-bottom: 1em;
    font-size: .75em;
    font-weight: 400;
    font-style: italic;
    background: #f04124;
    color: #FFF;
}
.error input, .error select, .error textarea {
    margin-bottom: 0;
}
.error input[type=checkbox], .error input[type=radio] {
    margin-bottom: 1em;
}
.error label, .error label.error {
    color: #f04124;
}
.error small.error {
    display: block;
    padding: .375em .5625em .5625em;
    margin-top: -1px;
    margin-bottom: 1em;
    font-size: .75em;
    font-weight: 400;
    font-style: italic;
    background: #f04124;
    color: #FFF;
}
.error>label>small {
    color: #676767;
    background: 0 0;
    padding: 0;
    text-transform: capitalize;
    font-style: normal;
    font-size: 60%;
    margin: 0;
    display: inline;
}
.error span.error-message {
    display: block;
}
input.error, select.error, textarea.error {
    margin-bottom: 0;
}
label.error {
    color: #f04124;
}
#form1_submit {
    float: right;
    margin-top: 12px;
    width: 20%;
    border: 1px solid #ccc;
    padding: 4px;
    margin-bottom: 4px;
}

.maindesc {
  /* float: left; */
  text-align: center;
}


.youtubearea {width: 100%;
max-width: 400px;
margin-left: auto;
margin-right: auto;

}

.visitwebsite {
  float: left;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 100%;
  text-align: right;
  margin-top: 12px;
  max-width: 1024px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.visitwebsite a{
  padding: 4px;
  color: #eee;
  width: auto;
  text-align: center;
  background-color: #d61940;
}

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;list-style:none}


/*RESPONSIVE GOOGLE MAP CSS*/


.google-thin {
  float: left;
  height: 300px;
  width: 100%;
  overflow: hidden;
}

#footerinside {
    float: left;
    width: 100%;
    color: #fff;
    text-align: center;
}


.breadcrumbs {
    float: left;
    color: #b9b9b9;
    width: 100%;
    text-align: left;
}

#footernav {
    float: left;
    color: #fff;
    width: 50%;
    text-align: center;
}

#webdesigner {
    float: left;
    color: #fff;
    width: 50%;
    text-align: right;
}

.breadcrumbs a{
    color: #cacaca;
    padding: 8px;
    display: inline-block;
}

.breadcrumbs li{
    color: #fff;
    /*! padding: 12px; */
    display: inline-block;
}

#socialmedia {
    padding-left: 8px;
    float: left;
    margin-top: 12px;
    margin-bottom: 12px;
border-radius: 4px;
width: 100%;
max-width: 1024px;
text-align: left;
}

#socialmedia a{
text-align: center;
font-size: 24px;
padding: 7px;
line-height: auto;
display: inline-block;
width: 38px;
height: 38px;
background-color: #999;
border-radius: 50%;
color:#fff;

}

.contactusarea {
  width: 50%;
  float: left;
  text-align: right;
  padding-right: 12px;
}

.contactusarea a {
  color: #eee;
}

.googlemap {
  max-width: 340px;
  width: 50%;
  float: left;
}
.google-maps {
  margin-top:0px;
        position: relative;
        padding-bottom: 75%;
        height: 0;
        overflow: hidden;
        margin-bottom: 32px;
        display: block;
        margin-right: auto;
        margin-left: auto;
   
}
  
  
.google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
  
  
/*RESPONSIVE GOOGLE MAP CSS*/ 


.whereit {
  padding-top: 100px;
  float: left;
  width: 100%;
  text-align: center;
  
}


.begins {
  padding-top: 0px;
  float: left;
  width: 100%;
  text-align: center;
  font-size: 40px;
  text-transform: uppercase;
  
}

.bannerlink {
  padding-top: 0px;
  float: left;
  width: 100%;
  text-align: center;

  
}

.parallax-window a {
  text-align: center;
  display: inline-block;
  margin-top: 24px;
  padding: 8px;
  background-color: #D71940;
  color: #eee;
}


.whereit img{
  width: 100%;
  text-align: center;
  max-width: 600px;
  /* min-width: 300px; */
}


#webdesigner {
  float: right;
  padding: 0px;
  width: 50%;
   text-align: right;
}

#searcharea {
  float: left;
  padding: 8px;
  width: 100%;
}

#webdesigner a{
  /* float: right; */
  padding: 8px;
  color: #ccc;
  font-size: 12px;
}

h2,h3,h4{padding:0}


.column_one h4, .column_three h4 {
font-family:museo-slab,serif;
font-style: italic;
        font-weight: 300;

 }


.column_one h5, .column_three h5 {
font-family:museo-slab,serif;
font-style: italic;
    font-weight: 300;
 }




.thirdcolumn {
  color: #eee;
  float: left;
  width: 33.33333%;
  text-align: center;
  font-size: 17px;
      position: relative;
      min-height: 240px;

  }

  .twothirdcolumn {
  color: #eee;
  float: left;
  width: 66.66666666666%;
  text-align: center;
  font-size: 17px;
      position: relative;
      min-height: 240px;

  }

.column_one {
position: relative;
padding: 16px;
  padding-top: 64px;
padding-bottom: 64px;
 height: 100%;

  background-color: #DC2440;
  }


.column_two {
  float: left;
  padding: 23px;
  text-align: center;
  font-size: 17px;
  background-color: #DC2440;
  background-image: url(/images/exterior.jpg);
  background-size: cover;
 background-position: top center;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  position: absolute;
  
  }

  .column_two img {

width: 100%;
line-height: 0;
display: block;
  }


.column_three {
position: relative;
  padding: 16px;
  height: 100%;
  padding-top: 64px;
  padding-bottom: 64px;
  background-color: #333;
  }




footer{
    padding: 12px;
  margin-top: 0px;
  float: left;
min-height: 140px;
  width:100%;/* padding:00px 0; *//* -webkit-transition:all .2s ease-in-out; */-moz-transition:all .2s ease-in-out;/* bottom:0; *//* height:20px */}a{text-decoration:none;color:#eee}

h1{font-size:48px;
text-transform: lowercase}

h2{font-size:28px; 
margin-bottom: 12px;
text-transform: uppercase;}

h3{font-size:22px;margin: 12px 0px;text-transform: uppercase;color: #DC2440;}


html{height:100%}#websitecomingbox{text-align:center;margin-bottom:48px;padding:12px}#websitecomingbox img{height:auto;text-align:center;padding-bottom:12px}#websitecomingtextbox{background-color:#DC2440;text-align:center;color:#fff;padding:24px;display:inline-block;width:100%;font-size:24px;max-width:400px;margin-bottom:60px}#websitecomingtextbox h2{font-size:48px}.logoband{width:440px;padding-left:32px}.logoband img,


.shrink .logoband img{width:auto;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out}

.logoband img{height: 134px;}
.shrink .logoband img{height:60px}

.bannercontent {width: 100%;padding: 24px;max-width: 600px;text-align: right;margin-left: auto;margin-right: auto;margin-top: 12px;display: inline-block;font-size: 16.3px;}
.previous a{
  float: left;
  position: relative;
  text-align: center;
  margin: 4px;
  padding: 4px;
  padding-left: 32px;
  border: 1px solid rgba(256,256,256,0.9);
  background-color: rgba(256,256,256,0.5);
}

.previous a:after {
 position:absolute;
 content:"b";
 font-family: petersen;
 left: 0px;
 top: 0px;
 color: #333;
 font-size: 28px;
 line-height: 1;
}

.next a{
  float: right;
  text-align: center;
  position: relative;
  margin: 4px;
  padding: 4px;
  padding-right: 32px;
  border: 1px solid rgba(256,256,256,0.9);
  background-color: rgba(256,256,256,0.5);
}


.next{
display: inline-block;
width: auto;


}

.previous{
display: inline-block;
width: auto;
}


.next a:after {
 position:absolute;
 content:"a";
 font-family: petersen;
 right: 0px;
 top: 0px;
 color: #333;
 font-size: 28px;
 line-height: 1;
}



::-moz-selection{background-color:#333;color:#eee}::selection{background-color:#333;color:#eee}header{width:100%;padding:00px 0;-webkit-transition: all .2s ease-in-out;-moz-transition:all .2s ease-in-out;top:0;height:100px;}header.shrink{height: 60px;}.container{width:100%;margin-left:auto;margin-right:auto;margin-top: 20px;/* max-width:600px; */text-align:center;}.shrink{padding:00px}



p{margin:0}
strong{font-weight:700}


section p{

  margin-top:14px}




p.excerpt {padding: 20px;}




@media (max-width: 768px){

.contactusarea {
  width: 100%;
  text-align: center;
  padding-bottom: 32px;

}



.googlemap {width: 100%;max-width: 100%;text-align: center;}

  #webdesigner {
  /*! float: right; */
  /*! padding: 0px; */
  /*! width: 50%; */
  /*! text-align: center; */
}

#searcharea {
  float: left;
  padding: 8px;
  width: 100%;
   text-align: center;
}





  .testimonialarea {
  padding-left: 12px;
  padding-right: 12px;

}


  .maindesc section {


    padding-left: 12px;
     padding-right: 12px;


}



  .portfoliologo {
  position: absolute;
  width: 80px;
    top: 84px;
  right: 4px;
  -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
    z-index: 100;

  
}

.portfoliologo img {
  width: 80px;
  -webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

  
}


.thirdcolumn {
  width: 100%;
  min-height: 160px;
}


.twothirdcolumn {
  width: 100%;
  min-height: 160px;
}

.column_one {

  padding-top: 32px;
padding-bottom: 32px;

  }

  .column_two{

  padding-top: 32px;
padding-bottom: 32px;

  }

  .column_three {

  padding-top: 32px;
padding-bottom: 32px;

  }

  .filterbox{
  width: 100%;
}

.sortbox {
  width: 100%;
}



    #wrapper {

    padding-top: 0px;
}



    .container{margin-top: 20px;}#websitecomingtextbox h2{font-size:42px}h1{font-size:40px}h3{font-size:20px}#websitecomingtextbox{font-size:20px;margin-bottom:60px}

    .logoband img{width:auto;height: 60px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;}


    header{height: 60px;}


    }


    @media (max-width:560px)
        
        




    {
        
        
        #footernav, #webdesigner, .breadcrumbs {
    float: left;
    color: #fff;
    width: 100%;
    text-align: center !important;
}
        
        


    header{height:60px}

      h1{font-size:32px}

       .logoband img{width:auto;height:60px;

    }




    }




  /* PHOTO GALLERY FILTER */
.controls{
  padding-left: 8px;
   padding-right: 8px;
  color: #DC2440;
  float: left;
  width: 100%;
}

.filterbox{
  float: left;
  border-bottom: 1px solid #eee;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 100%;
    text-align: center;
}

.sortbox {
  float: left;
  border-bottom: 1px solid #eee;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 30%;
}


.filterbox label, .sortbox label{
  float: left;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 100%;
  display: none;
}

label{
  width: 100%;
  margin: 0 .4em 0 0;
  padding-top: 0px;
  padding: 12px;
  float: left;
}

button{
  display: inline-block;
  padding: 6px;
  background: #fff;
border: 0px;
  color: #333;
  font-size: 14px;
  border-radius: 0%;
  cursor: pointer;
}

button.active{
  background: #333;
  color: #fff;
  text-transform: none;
  border: 1px solid #333;
}

button:focus{
  outline: 0 none;
}

button + label{
  margin-left: 1em;
}

#mixuparea {
    margin-left: 0;
   margin-right: 0;
  float: left;
  padding: 0px;
    padding-top: 4px;
  text-align: center;
  margin-bottom: 32px;
}
.container{
  padding: 4px;
  margin-top: 0px;
  text-align: justify;
  -webkit-backface-visibility: hidden;
}



.container .mix,
.container .gap{
  display: inline-block;
  width: 24%;
  margin: 0.25%;
  padding: 0px;
}

.container .mix{
  text-align: left;
  background: #03899c;
  margin-bottom: 0px;
  display: none;
  position: relative;
}






@media all and (max-width: 900px){

  .filterbox{

  width: 100%;
}

.sortbox {

  width: 100%;
}


.container .mix,
.container .gap{
  display: inline-block;
  width: 31%;
}

.container .mix{
  text-align: left;
  background: #03899c;
  margin-bottom: 0px;
  display: none;
  position: relative;
}

}






@media all and (max-width: 480px){


.container .mix,
.container .gap{
  display: inline-block;
  width: 48%;
}

.container .mix{
  text-align: left;
  background: #03899c;
  margin-bottom: 4px;
  display: none;
  position: relative;

}

}





@font-face {
  font-weight: normal;
  font-style: normal;
  font-family: 'codropsicons';
  src:url('../fonts/codropsicons/codropsicons.eot');
  src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
    url('../fonts/codropsicons/codropsicons.woff') format('woff'),
    url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
    url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}




a {
  color: #011230;
  text-decoration: none;
}


#Container .mix{
  display: none;
}



.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
 
.clearfix:after {
  clear: both;
}

.codrops-header {
  margin: 0 auto;
  padding: 2em;
  text-align: center;
}

.codrops-header h1 {
  margin: 0;
  font-size: 2.5em;
  line-height: 1.3;
}

.codrops-header h1 span {
  display: block;
  padding: 0 0 0.6em 0.1em;
  font-size: 60%;
  opacity: 0.7;
}

/* To Navigation Style */
.codrops-top {
  width: 100%;
  text-transform: uppercase;
  font-size: 0.69em;
  line-height: 2.2;
}

.codrops-top a {
  display: inline-block;
  padding: 0 1em;
  text-decoration: none;
  letter-spacing: 1px;
}

.codrops-top span.right {
  float: right;
}

.codrops-top span.right a {
  display: block;
  float: left;
}

.codrops-icon:before {
  margin: 0 4px;
  text-transform: none;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  font-family: 'codropsicons';
  line-height: 1;
  speak: none;
  -webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
  content: "\e001";
}

.codrops-icon-prev:before {
  content: "\e004";
}

/* Demo Buttons Style */
.codrops-demos {
  padding-top: 1em;
  font-size: 0.8em;
}

.codrops-demos a {
  display: inline-block;
  margin: 0.5em;
  padding: 0.7em 1.1em;
  outline: none;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.codrops-demos a:hover,
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
  border-color: #333;
  color: #333;
}

.related {
  text-align: center;
  font-size: 1.5em;
}

@media screen and (max-width: 25em) {

  .codrops-icon span {
    display: none;
  }

}





.grid a {
  float: left;
  /*! max-width: 250px; */
  width: 100%;
  color: #333;
}

.grid a:nth-child(odd) {
  
}

.grid .projectitem {
  position: relative;
  overflow: hidden;
  margin: 0px;
  background: #333;
}

.grid .projectitem:after    {
  font-family: delius ;
  content: "";
  position: absolute;
  width: auto;
  height: auto;
  text-align: center;
  font-size: 20px;
  color: #fff;
  }







.grid .projectitem img {
  position: relative;
  display: block;
  width: 100%;
  opacity: 1.0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.7s;
}

.grid div {
  position: absolute;
  bottom: 0%;
  z-index: 2;
  padding: px;
  width: 100%;
  height: auto;
  text-align: center;
}


.grid  h2{
  position: absolute;
  top: 20%;
  font-size: 14px;
}

.grid a:hover {
  position: absolute;
  bottom: 0%;
  z-index: 11;
  padding: 0px;
  width: 100%;
  height: auto;
  text-align: center;
}

.grid h2 {
  color: #FFFFFF;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}

.grid p {
  padding: 8px;
  background-color: rgba(0,0,0,0.6);
  color: #eee;
  position: absolute;
  bottom: 0px;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
}


.grid .projectitem button {
  position: absolute;
  top: 80px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
}

.grid,
.grid h2,
.grid p,
.grid .projectitem button {

  width: 100%;

}




/* Hover effects */
.grid a:hover .projectitem img {
   opacity: 0.1;
}






.grid a:hover h2
{
    margin-bottom: 0px;
     opacity: 1.0;
}




.grid a:hover p {
  opacity: 0;
}

/* Individual styles */


.demo-1 .grid .projectitem button
{
  top: 30%;
  left: 20%;
  background: #DC2440;
  color: #fff;
  opacity: 1;
  width: 60%;
  height: auto;
  margin-top: 0px;
  opacity: 0;
}

.demo-1 .grid a:hover .projectitem button
{
  opacity: 1;
}





  .grid h2 {
    margin-bottom: 0px;
     opacity: 0;
  }

  .grid p {
    margin: 0;
  
  }
}

@media screen and (max-width: 27em) {


  .grid a {
    width: 100%;
  }

  .grid a:nth-child(even) {
    margin: 0;
  }
}
  
  /* PHOTO GALLERY FILTER */