@charset "utf-8";
/* ============================================================
  RESET - http://meyerweb.com/eric/tools/css/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, 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,
article, aside, canvas, details, embed,
figure, figcaption, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
 header, hgroup, menu, nav, section {
  display: block;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ============================================================
  BOX SIZING & CLEARFIX
============================================================ */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}



/* ============================================================
  HTML & BODY
============================================================ */

html, body {
height: 100%;
}

body {
font-family: 'Alef', Arial;
font-size:11pt;
color:#181818;
padding:0;
margin:0;
background: url('../images/bg.jpg') no-repeat bottom left fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

h1 {
display: block;
text-align: center;
font-size: 44pt;
color: #ff7200;
text-shadow: 0 1px 2px #000000;
}

h2 {
display: block;
text-align: center;
font-size: 30pt;
color: #ffffff;
text-shadow: 0 1px 2px #000000;
}


ol, ul {
  list-style: none;
}




div#body {
 position: relative;
 max-width: 1000px;
 margin: 12px auto;
 padding:8px;
 background: rgba(255, 255, 255, 0.6) url('../images/lines.png')no-repeat top center fixed;
}

div#body.thankYou {
 height: 97%;
}


div.title {
display: block;
margin:0 auto;
width: 504px;
height:100px;
background-size: 504px 100px;
background-repeat: no-repeat;
}

img.imgtitle {
display: block;
margin:0 auto;
max-width: 100%;
}

img.yan {
 position: relative;
 float: right;
 height: 400px;
}


div.page {
 display: block;
direction: rtl;
}

.page::after {
 display: block;
 clear: both;
 content: '';
}

div#frames {
max-width: 800px;
float:left;
text-align: center;
margin:16px 0;
}
   
ul.frames {
 list-style-type:none;
 display: inline-table;
}   

ul.frames li {
display: block;
float: right;
margin:10px;
}

ul.frames li span {
display: block;
text-align: center;
width: 152px;
margin:0 auto;
padding: 4px 2px;
color: #ffffff;
font-size: 14pt;
background: #181818;
border-radius: 6px 6px 0 0;
}

ul.frames li img {
display: block;
width: 158px;
height: auto;
border: 3px #ffffff solid;
-webkit-box-shadow: 0 0 12px 0 #333333;
-moz-box-shadow: 0 0 12px 0 #333333;
box-shadow: 0 0 12px 0 #333333;
}

input:focus {
 outline: none;
}

div#homeform {
 position:relative;
 width:100% !important;
 text-align: center;
 padding: 4px 0;
 background: #181818;
 border: 3px #ff7200 solid;
 clear: both;
}

div#homeform img.doit {
display: block;
margin:0 auto;
}


div#homeform input.input {
 display:inline-block;
 width: 180px;
 margin: 6px auto;
 padding: 6px;
 font-family: 'Alef', Arial;
 color: #545454;
 font-size: 11pt;
 border:0;
 -moz-box-shadow: 0 0px 4px 0px #000000;
 -webkit-box-shadow: 0 0px 0px -4px #000000;
 box-shadow: 0 0px 4px 0px #000000;
}

div#homeform input.button {
 display:inline-block;
 margin:14px auto;
 padding: 6px;
 width:60px;
 font-family: 'Alef', Arial;
 font-size:11pt;
 color:#ffffff;
 border:0;
 background: #ff7200;
 border-radius: 2px;
 cursor: pointer;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 transition: all 0.5s ease;
}

div#homeform input.button:hover {
 background: #333333;
 -moz-box-shadow: 0 0 0 0 #dfe8ec;
 -webkit-box-shadow: 0 0 0 0 #dfe8ec;
 box-shadow: 0 0 0 0 #dfe8ec;
}
  

div.text {
max-width: 400px;
 margin: 26px auto;
 padding: 8px;
 font-size: 18pt;
 background: rgba(255, 255, 255, 0.9);
 border-radius: 8px;
 -webkit-box-shadow: 0 4px 12px -2px #181818;
 -moz-box-shadow: 0 4px 12px -2px #181818;
 box-shadow: 0 4px 12px -2px #181818;
}

div.text span.mobile {
  display: none;
}

span.goahead {
 float: right;
 color: #ff7200;
 font-size: 24pt;
 direction:rtl;
 position:relative;
 top: 6px;
 right:64px;
}


img.logo {
display: block;
max-width: 200px;
height: auto;
position: absolute;
margin:0;
}

div#body.thankYou img.yan {
 position: absolute;
 right: 0;
 bottom: 0;
}

.thankYouText {
 direction: rtl;
 text-align: center;
 padding: 8px;
 font-size: 28pt;
 background: rgba(255, 255, 255, 0.9);
 border-radius: 8px;
 -webkit-box-shadow: 0 4px 12px -2px #181818;
 -moz-box-shadow: 0 4px 12px -2px #181818;
 box-shadow: 0 4px 12px -2px #181818;
}

.thankYouText h1 {
 font-size: 36pt;
}

@media (min-width: 801px) {
 .thankYouText {
  position: absolute;
  max-width: 600px;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -30%);
 }
}

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

span.goahead {
 display: none;
}
  
 img.logo {
   position: relative;
   margin: 6px auto;
 }
}

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

  div#frames {
   max-width: 360px;
   margin:0 auto;
   float: none !important;
  }
  
 img.yan {
  display: block;
  float: none;
  height:200px;
  margin: 0 auto -8px auto;
 }
 
 
 ul.frames li img {
  -webkit-box-shadow: 0 0 0 0 ;
-moz-box-shadow: 0 0 0 0;
box-shadow: 0 0 0 0;
 }
 

 div#homeform input.button {
  width:180px;
 }
 
 div.text {
 position: relative;
 right:-2px;
  max-width: 336px;
 }
 
 div.text span.pc {
  display: none;
}

div.text span.mobile {
  display: block;
}

div.text span.mobile a, div.text span.mobile a:visited {
 display: block;
 margin: 6px auto 8px auto;
 padding: 0 0 2px 0;
 width: 260px;
 height: auto;
 color: #ffffff;
 font-size: 24pt;
 background: #d54500;
 border-radius: 6px;
 text-decoration: none;
 font-weight: 100;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 transition: all 0.5s ease;
  -webkit-box-shadow: 0 4px 8px -2px #181818;
 -moz-box-shadow: 0 4px 8px -2px #181818;
 box-shadow: 0 4px 8px -2px #181818;
}

div.text span.mobile a:hover {
  background: #050505;
}

 .thankYouText {
  max-width: unset;
  width: 300px;
  position: relative;
  margin: -16px auto;
 }


 div#body.thankYou img.yan {
  bottom: 8px;
 }


 .thankYouText  h1 {
  font-size: 32pt;
 }

}


 @media only screen and (max-width: 400px) {
 
 div.title {
 width: 290px;
 height: 58px;
 background-size: 290px 58px;
 background-repeat: no-repeat;
 }

  h1, .thankYouText h1 {
   font-size: 22pt;
  }
  
   h2, .thankYouText {
   font-size: 19pt;
  }
  
   ul.frames li {
  float: none;
  margin: 8px auto !important
 }
 
 ul.frames li span {
  width:260px;
  font-size: 16pt;
 }
 
    ul.frames li img {
     width:280px;
    }
    
 
  div.text {
  max-width: 280px;
  right:0;
 }
 
 div#homeform input.input {
  display: block;
  width:280px;
  padding: 12px 6px;
 }
 
 div#homeform input.button {
 width:280px;
 }
 
 }