/* Document   : screen
 * Created on : 02.05.2013, 10:00:07
 * Author     : rodric
 * Description: frontend styling
 */

 /* IMPORT
  ================================================== */

@font-face{
  font-family: 'SiteBold';
  src:url('../css/font/NeuzeitGroT-Bold.eot?iefix') format('eot');
}

@font-face{
  font-family: 'SiteBold';
  src:url('../css/font/NeuzeitGroT-Bold.eot?iefix');
  src:url('../css/font/NeuzeitGroT-Bold.woff') format('woff'),
    url('../css/font/NeuzeitGroT-Bold.ttf') format('truetype'),
    url('../css/font/NeuzeitGroT-Bold.svg#NeuzeitGroT-Bold') format('svg');
}

@font-face{
  font-family: 'SiteRegular';
  src:url('../css/font/NeuzeitGroT-Regu.eot?iefix') format('eot');
}

@font-face{
  font-family: 'SiteRegular';
  src:url('../css/font/NeuzeitGroT-Regu.eot?iefix');
  src:url('../css/font/NeuzeitGroT-Regu.woff') format('woff'),
    url('../css/font/NeuzeitGroT-Regu.ttf') format('truetype'),
    url('../css/font/NeuzeitGroT-Regu.svg#bNeuzeitGroT-Regu') format('svg');
}

 /* RESET
   ================================================== */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin : 0;
    padding : 0;
    border : 0;
    outline : 0;
    font-size : 100%;
    vertical-align : baseline;
    background : transparent;
} 

/* GENERAL
 ================================================== */

body {
    background: #ffffff;
    font-family: 'SiteRegular', Arial, sans-serif;
    color: #2d478b;
    font-size: 18px;
}

.clear {
    clear: both;
    height: 0px;
    font-size: 0px;
    line-height: 0px;
    padding: 0px;
    margin: 0px;
}

h1, h3, p.largetitle, p.smalltitle, b, strong {
    font-family: 'SiteBold', Arial, sans-serif;
}

h1 {
    font-size: 60px;
    letter-spacing: -2px;
}

h2 {
    font-size: 22px;
    line-height: 28px;
}

h3, p {
    font-size: 18px;
    line-height: 24px;
}

p.largetitle {
    font-size: 26px;
    line-height: 24px;
    padding: 30px 0 20px 0;
}

p.smalltext {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 30px;
}

h1, h2, h3, h4, h5, h6, b, strong {
    font-weight: normal;
}

a, .largetitle a:hover {
   color: #2d478b;
   text-decoration: underline; 
}

.largetitle a {
  text-decoration: none; 
}

a.button {
   display: inline-block; 
   color: #ffffff;
   text-decoration: none; 
   background-color: #2d478b;
   line-height: 35px;
   height: 35px;
   padding: 0 15px;
   -o-border-radius: 25px;
   -ms-border-radius: 25px;
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   border-radius: 25px;
   -o-transition:.5s; 
   -ms-transition:.5s;
   -webkit-transition:.5s;
   -moz-transition:.5s;
   transition:.5s;
}

a.button:hover {
    background-color: #2F5EAF;
}

.circle:before {
    content: ' \25CF';
    font-size: 20px;
    color: #d93a37;
    line-height: 60px;
}

h1, h2, .circle.adjust {
    padding-right: 25px;
}

/* CONTENT
 ================================================== */

#header {
    top: 0;
    width: 100%;
    height: auto;
}

#footer {
    height: auto;
    width: auto;
    position: relative;
    bottom: 0px;
}

#content {
    width: 800px;
    margin: 15px auto 0;
}

#left {
    float: left;
    width: 380px;
    margin-bottom: 60px;
    text-align: center;
}

#left .textwrap {
    text-align: left;
}

#left .textwrap h3 {
    margin-bottom: 60px;
}

#left .para,
#left .textwrap p {
    margin-bottom: 30px;
}

#right {
    float: left;
    width: 420px;
}

#right .textwrap {
    margin: 5px 0 0 56px;
}

#right .imagewrap {
    padding-left: 40px;
    background: #ffffff url('../img/red_thread.jpg') no-repeat bottom left;
}

#slides {
    width: 380px;
    height: 80px;
    margin: 15px 0 52px;
}

#slides a {
    display: block;
    float: left;
    text-decoration: none;
    margin-right: 17px;
   -o-transition:.5s; 
   -ms-transition:.5s;
   -webkit-transition:.5s;
   -moz-transition:.5s;
   transition:.5s;
}

#slides a:hover {
    opacity: .5;
}

#slides a.last {
    float: right;
    margin-right: 0;
}

#zg {
  display: block;
  text-align: right;
  padding-right: 30px;
  margin-bottom: 150px;
}

/* GALLERY/LIGHTBOX
 ================================================== */

.stopscrolling {
  height: 100%;
  overflow: hidden;
}

#galleryoverlay.galleryinactive,
#galleryoverlay.galleryinactive #galleryclose {
  display: none;
}

#galleryoverlay.galleryactive {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background-image: url('../img/fallback.gif');
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
}

#galleryoverlay.galleryactive #galleryclose {
  cursor: pointer;
  position: absolute;
  top: 5%;
  right: 5%;
  width: 23px;
  height: 20px;
  background: transparent url('../img/lightbox_close.png') no-repeat;
}

/* MEDIA QUERIES
 ================================================== */

@media only screen and (max-width: 850px) {
    #content,
    #left,
    #right {
        width: 380px;
        float: none;
    }
    #right .textwrap {
        margin: 5px 0 0 16px;
    }
    #right .imagewrap {
        padding-left: 0;
    }
}

@media only screen and (max-width: 420px) { 
    h1 {
        font-size: 15vw;
    }
    h1, h2, .circle.adjust {
        padding-right: 0;
    }
    #content {
        padding: 0 5%;
        width: 90%;
        word-wrap: break-word;
    }
    #left,
    #right {
        width: 100%;
    }
    #right .textwrap {
        margin: 5px 0 0 0;
    }
    img#featured {
        width: 100%; 
        height: auto;
    }
    #slides {
        height: auto;
        margin: 15px auto 30px;
        width: 115px;
    }
    #slides a,
    #slides a.last {
        float: none;
        margin: 0 0 20px 0;
    }
    #zg {
        padding-right: 5%;
    }
}