@charset "utf-8";
/* CSS Document */
/* ==========================================================================
   Reset
   ========================================================================== */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
ul, li{margin:0;list-style:none;list-style-image:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after, 
q:before, q:after{content:"";content:none;}
abbr[title], dfn[title]{cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
input, select , button{vertical-align:middle;}
textarea{overflow:auto;vertical-align: top;}
button, input, select, textarea{margin:0;}
strong, th{font-weight:bold;}
button{overflow:visible;padding:0;background:none;border:0;line-height:0;}
button::-moz-focus-inner{border:0;padding:0;}


/* ==========================================================================
   Fonts
   ========================================================================== */

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

}

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

}

/* ==========================================================================
   Main
   ========================================================================== */

   html,body{
      width:100%;
      height:100%;
      background: url(../img/background.png);
      font-family:'avenirnextltproregular',sans-serif;
   }

   #wrapper {
      width: 100%;
   }

   #header {
      position: fixed;
      width: 100%;
      z-index: 1000;
      background-color: #fff;
   }

   .contentHeader {
      max-width: 1280px;
      height: 220px;
      margin: 0 auto;
   }

   #header img{
      float: left;
      max-width: 850px;
      width: 32%;
   }


   #header h2 {
      text-align: center;
      font-family: 'avenirnextltprobold', sans-serif;
      color: #00cccc;
      padding: 10% 5% 0 20%;
      font-size: 1.8em;
   }

   #content{
      position: relative;
      max-width:1280px;
      min-height: 900px;
      margin: 0 auto;
      background: no-repeat url(../img/background_cnt.png) 20px 250px;
      background-size: 35%;
   }

   .text {
      display: block;
      text-align: center;
      width: 60%;
      height: 100%;
      font-size: 1.3em;
      color: #6c6c6c;
      padding: 250px 5% 0 35%;
      text-shadow: 2px 0px 0px #fff;
   }

   .social li{
    padding-right: 20px;
    display: inline;
   }

/* ==========================================================================
   Media Querys
   ========================================================================== */



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

   .contentHeader {
      width: 100%;
      height: auto;
   }
}


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

   .text {
      display: block;
      text-align: center;
      width: 60%;
      height: 100%;
      padding: 250px 0 0 20%;
      margin: 0 auto;
   }

   #header h2 {
      padding: 5% 5% 0 40%;
      font-size: 1.5em;
   }

   #content{
      min-height: 100%;
      margin: 0 auto;
      background: no-repeat url(../img/background_cnt.png) -220px 250px;
   }

   .social li{
    padding-top: 20px;
    display: block;
   }
}



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

   #header img{
      width: 40%;
   }

   .text {
      width: 60%;
      height: 100%;
      padding: 200px 0 0 20%;
      margin: 0 auto;
      line-height: 1em;
   }

   #header h2 {
      text-align: center;
      font-family: 'avenirnextltprobold', sans-serif;
      color: #00cccc;
      padding: 5% 5% 0 40%;
      font-size: 1.5em;
   }

   #content{
      min-height: 100%;
      margin: 0 auto;
      background: no-repeat url(../img/background_cnt.png) -280px 150px;
   }

   .social li img{
    width: 50%;

   }
}



@media screen and (max-height: 610px){

   #header img{
      width: 40%;
   }

   .text {
      width: 80%;
      height: 100%;
      padding: 210px 0 0 12%;
      margin: 0 auto;
      line-height: 1em;
   }

   #header h2 {
      text-align: center;
      font-family: 'avenirnextltprobold', sans-serif;
      color: #00cccc;
      padding: 5% 5% 0 40%;
      font-size: 1.5em;
   }

   #content{
      min-height: 100%;
      margin: 0 auto;
      background: no-repeat url(../img/background_cnt.png) -300px 110px;
   }

   .social li img{
    display: inline;
    width: 30%;

   }
}




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

   #header img{
      width: 40%;
   }

   .text {
      width: 90%;
      font-size: 1.1em;
      padding: 150px 0 0 0;
      line-height: 1em;
   }

   #header h2 {
      font-size: 1.2em;
   }

   #content{
      background: none;
   }

   .social li img{
    width: 40%;

   }
}






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

   #header img{
      width: 100%;
   }

   #header h2 {
      width: 90%;
      font-family: 'avenirnextltprobold', sans-serif;
      color: #00cccc;
      padding: 10px 0;
      font-size: 1em;
      margin: 0 auto;
   }

   .text {
      width: 90%;
      font-size: 1.1em;
      padding: 260px 0 0 0;
      line-height: 1em;
   }

   #content{
      background: none;
   }

   .social li img{
    width: 80%;

   }
}