*{margin:0;padding:0px;font-family: 'Open Sans', sans-serif;outline-width:0;outline-color:transparent;}
.top{background-color: #fff;padding:140px 5% 50px 5%;
background:  url(ref/web.jpg) no-repeat top center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;   
}   

#bigsite{text-align: center;padding-bottom: 50px;}
body,html{background: #f2f2f2 ;background-size: 100% auto;}
h1,p,h2{margin-bottom: 50px;color:#2d2329;}

.top h1{color:#fff;line-height: 1.05em;}

h1,h2{letter-spacing: -0.05em;} 
h1{font-weight: 800;font-size: 60px;margin-bottom: 50px;letter-spacing: -0.05em;}
h2{font-weight: 300;font-size: 48px;padding-top: 70px;max-width:470px;margin-left: auto;margin-right: auto;color:#2d2329;margin-bottom: 85px;}
p{font-weight: 400;font-size: 22px;line-height: 1.9em;}
p strong{font-weight: 800;font-size: 1.5em;}
p a{text-decoration: none;color:#69a0e6;}
p a:hover{text-decoration: underline;}
p.mail{font-weight: 300;margin-bottom: 80px;font-size: 18px;display: block;margin-right:auto;margin-left:auto;width:242px;
 
}
p.mail a{width:240px;padding:16px 0;border-radius:32px;border:1px solid #fff; background: url(ref/bg.png);display: block;}
p.mail a:hover{text-decoration: none;background-color: #1f171f;} 
.top p.mail a{font-weight: 400;}
.top p{color:#fff;margin-bottom: 70px;line-height: 2em;}
a:hover img{opacity: 0.90;filter: alpha(opacity=90);}   
img{max-width: 100%;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); 
-moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);   
  max-width: 900px;

   display: block;
   margin-bottom: 0px;
   position: relative;z-index: 2;
}
.refobal {max-width:900px;margin:0 auto;position: relative;z-index: 1;background-color: #4585f4;}
.noha{display: none;}


p.copy{font-size: 14px;display: block;padding-top: 60px;text-align: center;color:#2d2329;}
p.ref{font-size: 18px;color:#000;margin-bottom: 1.5em;line-height: 1.5em;}
p.ref a{font-weight: 300;font-size: 0.9em;} 
   .bottom{padding:0 10px;}  

.refunder{background-color: #fff;max-width:900px;margin:0 auto;margin-bottom: 130px;text-align: left;position: relative;z-index: 1;}
.refunder p.ref{margin-bottom: 0;display: block;padding:3% 4%;border-top:1px solid #aaaaaa;} 
.colors{position: absolute;right:15px;top:15px;width:50%;}
.color{width:12px;margin:5px;height:12px;float: right;border-radius:6px;}

.colorstop{position: absolute;top:40px;width:90%;}
.colorstopin{width:230px;margin: 0 auto;height:15px;}
.colorstop .color{width:10px;height:10px;float: left;margin:3px;}  



 

@font-face {
  font-family: 'FontAwesome';
  src: url('font/fontawesome-webfont.eot?v=4.7.0');
  src: url('font/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('font/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), 
  url('font/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('font/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
  url('font/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}   
   .fa{font-family: 'FontAwesome';font-style: normal;}
   .reference{text-align: center;color:#fff;text-decoration: none;}
.fa-chevron-down:before{content:'\f078';font-size: 60px;}

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

  .top{padding:130px 5% 50px 5%;}
  #bigsite{padding-bottom: 50px;}
  h1,p,h2{margin-bottom: 50px;}  
  h1{font-size: 40px;margin-bottom: 40px;}
  h2{font-size: 38px;padding-top: 70px;margin-bottom: 70px;}
  p{font-size: 20px;}
  p strong{font-weight: 800;font-size: 1.2em;}
  img{margin-bottom: 0px;}
  p.copy{font-size: 14px;padding-top: 60px;}
  p.ref{font-size: 20px;} 
   
   
  .noha{margin-bottom: 70px;}
  .refobal {max-width:700px;}
  
  .refunder {max-width: 700px;}
  img {max-width: 700px;}

}
@media only screen and (max-width:1000px){

  .top{background-color: #fff;padding:70px 5% 20px 5%;}
  h1,p,h2{margin-bottom: 30px;}
  h1{font-size: 45px;margin-bottom: 30px;}
  h2{font-size: 35px;padding-top: 40px;margin-bottom: 50px;}
  p{font-size: 15px;margin-bottom: 40px;}
  p.mail{margin-bottom: 50px;font-size: 14px;width:202px;}
  p.mail a{width:200px;}
  img{max-width: 100%;}
  
  p.copy{padding-top: 10px;}
  
  p.ref{font-size: 18px;}
   .top p{color:#fff;margin-bottom: 40px;}
   
.colors{position: absolute;right:5px;top:5px;width:50%;}


 .colors{position: absolute;right:5px;top:5px;width:50%;}
}

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

  .noha{height:40px;background-size:130px}
 .color{width:14px;margin:2px;height:14px;float: right;border-radius:7px;}  
   .refunder p.ref{margin-bottom: 0;display: block;padding:5% 6%;}
   .refunder{margin-bottom: 90px;}
   
 .color{width:6px;margin:2px;height:6px;float: right;border-radius:3px;}
}
@media only screen and (max-width:400px){


  

}
 img.foo{width:100%;height:auto;margin-bottom: 0;display: block;}
.hide{display: none;}