* { margin: 0; padding: 0; }

.ribbon {
    font-size: 0.8em !important;
 /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */
    letter-spacing: 2px;
    width: 60%;
    text-transform: uppercase; 
    position: relative;
    background: #8A665D;
    color: #fff;
    text-align: center;
    padding: 1em 2em; /* Adjust to suit */
    margin: 0 auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
.ribbon:before, .ribbon:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -1em;
    border: 1.5em solid #6F5650;
    z-index: -1;
}
.ribbon:before {
    left: -2em;
    border-right-width: 1.5em;
    border-left-color: transparent;
}
.ribbon:after {
    right: -2em;
    border-left-width: 1.5em;
    border-right-color: transparent;
}
span.highlight{
    color: #ffffff;
}
#block-2 p{
    color: #FBD4CC;
    margin-bottom: 1em;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #53423E transparent transparent transparent;
    bottom: -1em;
}
.ribbon .ribbon-content:before {
    left: 0;
    border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
    right: 0;
    border-width: 1em 1em 0 0;
}
.non-semantic-protector {
    position: relative;
    z-index: 1;
}
.cformspacer{
    width: 100%;
    height: 5em;
}
.header{
    background: #68C3C5;
    text-align: center;
    height: 3.8em;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
    }
.header:after{
        background: url('../images/zigzag1.png') repeat-x top;
        background-size: contain;
        height: 32px;
        width: 100%;
        display: block;
        content:"";
    }
img.logo{
        width: 3.5em;
        margin-top: 0.75em;
    }
h2{
    color: #ffffff;
    text-align: center;
}
.rightcol{
    background: url('../images/linetop.png') top no-repeat, url('../images/linetop.png') bottom no-repeat;
    background-size: 100%, 100%;
    display: table;
}
h2:before{
    background: url(../images/banner-left.png) no-repeat;
    background-size: 100%;
    text-transform: uppercase;
    width: 30px;
    height: 40px;
}
h2:after{
    
}
img.spidergraphic{
    width: 100%;
}
.content{
    width: 100%;
}
.contentblock1{
    width: 100%;
    text-align: center;
    background: url('../images/spider-graphic.gif') no-repeat top;
    background-size: 100%;
}
    ul {
    text-align: center;
    display: inline-block;
    }
#main{
    width: 70%;
    margin: 0 auto;
}
ul li{
    display: inline;
    height: 100%;
    vertical-align: middle;
    display: table-cell;
}
ul li a {
    text-decoration: none;
    color: #fff;
    font-family: 'Audiowide', cursive;
    padding-right: 1em;
    text-transform: uppercase;
    font-size: 0.7em;
}
.testimonial{
    background: url('../images/testimonialbkg.png') repeat;
    margin: 3em 0;
    border-radius: 3px 3px 3px 3px;
-webkit-box-shadow: 0 2px 15px rgba(71, 71, 71, 0.45);
-moz-box-shadow: 0 2px 15px rgba(71, 71, 71, 0.45);
box-shadow: 0 2px 15px rgba(71, 71, 71, 0.45);
padding: 0 1em 1em;
}
#block-2 .testimonial p{
    color: #543623;
    padding-top: 1em;
    font-size: 0.9em;
    text-align: justify;
}
img.quote{
    float: left;
}
form{
    margin-left: 15%;
}
.leftcol{
    padding-top: 2em;
}
.leftcol p{
    margin-left: 1em;
    margin-right: 1em;
    text-align: justify;
}
#block-3 .col2 p{
    margin-bottom: 1em;
}
.col1 img{
        border-radius: 3px 3px 3px 3px;
-webkit-box-shadow: 0 2px 15px rgba(71, 71, 71, 0.45);
-moz-box-shadow: 0 2px 15px rgba(71, 71, 71, 0.45);
box-shadow: 0 2px 15px rgba(71, 71, 71, 0.45);
width: 100%;
}
.col2{
    padding-top: 0.5em;
}
.col2 p{
    text-align: justify;
    color: #6F5650;
    margin-left: 1em;
    margin-right: 1em;
}
.col2 a{
    color: #55443F;
    font-weight: bold;
    text-decoration: none;
}
.col2 a:hover{
    color: #000000;
}
.col3{
    background: url('../images/linetop.png') top no-repeat, url('../images/linetop.png') bottom no-repeat;
    background-size: 100%, 100%;
    display: table;
}
.col3 h2{
    margin-top: 0.5em;
    text-transform: uppercase;
    color: #6F5650;
}
.col3 p{
    font-size: 0.9em;
    margin: 0 .2em 1em;
    color: #6F5650;
    text-align: justify;
}
.col3 a{
    color: #ffffff;
    text-decoration: none;
}
.col3 a:hover{
    color: #55443F;
}
.collabtxt{
    background: url('../images/collaborationbkg.png') repeat;
    padding: 1em;
}
html body#top div#block-3 div.content div.col3 h2{
    background: url('../images/collaborationbkg.png') repeat;
    padding-top: 1em;
}
#block-3 .col1 img{
    display: none;
}
#block-1 {
    background: url('../images/block1bkg.png') repeat, url('../images/wobble1.png') bottom repeat-x #fefefe;
    display: block;
    width: 100%;
    display: table;
    margin: 0 auto;
    margin-top: 3.5em;
    padding-bottom: 2em;
    }
#block-2 {
    display: table;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 2em;
    background: url('../images/block1bkg.png') repeat, url('../images/wobble2.png') bottom repeat-x #C58072; 
    }
.leftcol{
        width: 100%;
        display: block;
    }
#block-3 {
    background: url('../images/block1bkg.png') repeat scroll 0 0%, url('../images/wobble3.png') repeat-x scroll center bottom #FFEFD5;
    display: table;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 2em;
}
#block-4 {
    background: url('../images/block1bkg.png') repeat scroll 0 0%, url('../images/wobble4.png') bottom repeat-x #56AAAC;
    display: table;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 2em;
}
#block-4 p{
    color: #B5F1F2;
    margin: 2em 0;
    text-align: justify;
    padding-left: 1em;
    padding-right: 1em;
}
#block-5{
    background: url('../images/block1bkg.png') repeat scroll 0 0%, #FFEFD5
}
.webwrap{
    width: 33.3333%;
    float: left;
    text-align: center;
    margin-bottom: 1em;
}

.webwrap:hover img{
    border: 4px solid #FFEFD5;
    margin: -4px;
}
.webwrap h3{
    display: none;
    color: #6F5650;
    text-align: center;
    background: #FFEFD5;
    position: relative;
    z-index: 4;
    line-height: 2;
    width: 81%;
    margin: -2.2em auto 0;
    text-transform: uppercase;
}
blockquote{
    float: none;
    width: 80%;
    background: url('../images/linetop.png') top no-repeat, url('../images/linetop.png') bottom no-repeat;
    background-size: 100%, 100%;
    padding: 0;
    color: #fefefe;
    font-family: "georgia", serif;
    text-transform: uppercase;
    font-size: 1.2em;
    text-align: center;
    margin-left: 10%;
    padding: 1em 0;
}
img.website{
    width: 80%;
    border-radius: 3px 3px 3px 3px;
    -webkit-box-shadow: 0 2px 15px rgba(71, 71, 71, 0.45);
    -moz-box-shadow: 0 2px 15px rgba(71, 71, 71, 0.45);
    box-shadow: 0 2px 15px rgba(71, 71, 71, 0.45);
}
body{
    height: 100%;
}
#back-to-top { position: fixed; right: 10px; bottom: 10px; }
.spacer{
    height: 1em;
    width: 100%;
}
.clear { clear: both; }
 #block-5 .cform p.cdetails{
    background: url('../images/envelope.png') no-repeat;
    background-size: 100%;
    width: 90%;
    margin: 0 auto;
    min-height: 300px;
    max-width: 800px;
    text-align: center;
    padding-top: 2em;
}
.cform a{
    color: #6F5650;
    text-decoration: none;
}
img.socmed{
    float: right;
}
/*------------------------------------Style for big screens---------------------------------------------*/
 @media screen and (min-width: 600px){
    .content{
        width: 70%;
        margin: 0 auto;
    }
    ul {
    text-align: center;
    display: inline-block;
    }
    .webwrap:hover h3{
    display: block;
}
    .collabtxt{
        padding: 0;
    }
    .header{
    text-align: center;
    height: 5em;
    width: 100%;
    position: fixed;
    top: 0;
    }
    .ribbon {
    font-size: 16px !important;
    }
    .contentblock1{
    width: 70%;
    margin: 0 auto;
    max-width: 900px;
    }
    .header:after{
        width: 100%;
        display: block;
        content:"";
    }
    img.logo{
        width: 3.5em;
        margin-top: 0.75em;
    }
    ul li a {
        font-size: 1em;
    }
    #block-1{
        margin-top: 3em;
        height: 500px;
    }
    p{
        font-family: 'Open Sans', sans-serif; 
    }
    .spacer{
    height: 4em;
    width: 100%;
}
    .text-left{
        float: left;
        width: 50%;
    }
    p.verybig{
        text-transform: uppercase;
        font-size: 6em;
        color: #B385B5;
        float: left;
        margin-top: 1em;
    }
    p.subheading{
        font-size: 2em;
        float: left;
    }
    .ribbon{
        width: 50%;}
 .leftcol{
    width: 48%;
    float: left;
 }
 .leftcol p{
    margin-left: 0;
    margin-right: 0;
 }
  .rightcol{
    width: 48%;
    float: right;
 }
 .col1{
    width: 15%;
    margin-right: 5%;
    float: left;
    min-height: 3em;
 }
 .col2{
    width: 42%;
    float: left;
    margin-right: 3%;
    
 }
 html body#top div#block-3 div.content div.col3 h2{
    font-size: 1em;
 }
 .col2 p{
    text-align: justify;
    color: #6F5650;
    margin-left: 0;
    margin-right: 0;
}
 .col3{
    width: 20%;
    float: right;
 }
 .cform{
    font-family: "georgia", serif;
 }
 #block-3 .col1 img{
    display: block;
    width: 100%;
 }
 #block-4 p{
    padding: 0;
 }
 blockquote{
    float: right;
    width: 25%;
    background: url('../images/linetop.png') top no-repeat, url('../images/linetop.png') bottom no-repeat;
    background-size: 100%, 100%;
    padding: 1em;
    color: #fefefe;
    font-family: "georgia", serif;
    text-transform: uppercase;
    font-size: 1.5em;
    text-align: center;
    margin-left: 2em;
}
#block-5 .cform{
    background: url('../images/envelope.png') no-repeat;
    background-size: 100%;
    width: 90%;
    margin: 0 auto;
    min-height: 800px;
    max-width: 800px;
}
.cform form{
    padding-top: 7em;
    float: left;
    margin-right: 3em;
    width: 15em;
}
#block-5 .cform p.cdetails{
    font-family: "georgia",serif;
    padding-top: 6em;
    font-size: 1.5em;
    color: #666666;
    text-align: left;
    background: none;
    width: auto;
}
.cform p.cdetails2{
    font-family: "georgia",serif;
    padding-top: 8em;
    font-size: 1.5em;
    color: #666666;
    text-align: center;
}
.cform a{
    color: #6F5650;
    text-decoration: none;
}
html body#top div#block-5 div.content div.cform form p input{
    padding: 5px;
    border-radius: 3px;
    background: #fefefe;
    width: 100%;
    font-family: "georgia",serif;
}
html body#top div#block-5 div.content div.cform form p textarea{
    height: 5em;
    padding: 5px;
    border-radius: 3px;
    background: #fefefe;
    width: 100%;
        font-family: "georgia",serif;
}
label{
    font-family: "georgia",serif;
}
 }

  @media screen and (min-width: 800px){
     .col2{
    width: 49%;
    }
    html body#top div#block-3 div.content div.col3 h2{
	font-size: 1.1em;
    }
 }
  @media screen and (min-width: 1000px){
    html body#top div#block-3 div.content div.col3 h2{
	font-size: 1.3em;
    }
 }
 @media screen and (min-width: 1200px){
     .col2{
    width: 48%;
    }
    html body#top div#block-3 div.content div.col3 h2{
	font-size: 1.4em;
    }
 }
 @media screen and (min-width: 1300px){
     .col1{
    width: 15%;
    margin-right: 5%;
    float: left;
    min-height: 3em;
 }
 .col2{
    width: 48%;
    float: left;
    margin-right: 3%;
    
 }
 .col3{
    width: 20%;
    float: right;
 }
    html body#top div#block-3 div.content div.col3 h2{
	font-size: 1.5em;
    }
 }
  @media screen and (min-width: 1500px){
         .col1{
    width: 15%;
    margin-right: 5%;
    float: left;
    min-height: 3em;
 }
 .col2{
    width: 53%;
    float: left;
    margin-right: 3%;
    
 }
 .col3{
    width: 20%;
    float: right;
 }
  }