@font-face { font-family: 'IRANSans-web'; src: url('../fonts/IRANSans-Light-web.eot'); src: url('../fonts/IRANSans-Light-web.eot?#iefix') format('eot'),  /* IE6–8 */  url('../fonts/IRANSans-Light-web.woff2') format('woff2'),  /* Chrome36+, Opera24+*/  url('../fonts/IRANSans-Light-web.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ font-weight: 300; }

/* body { background: #8c989f url('img/bg.png') 0 0 repeat; } */
body { background: #8c989f; -ms-box-sizing: border-box; box-sizing: border-box; }
.info, .btn, p, a, h1 {font-family: 'IRANSans-web', Tahoma, sans-serif;}
.container { margin: 0 auto; padding: 0; text-align: center; }
.info { color: #fff; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }
.info h1 { font-size: 136px; padding: 0 226px 0 226px; text-shadow: 0px 5px rgba(0,0,0,.05); font-weight: 500; line-height: 1.1; color: inherit; margin: .67em 0; }
.info p { font-size: 36px; text-shadow: 0px 5px rgba(0,0,0,.05); margin: 0 0 10px; display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; line-height: 1.42857143; }
.info p span {font-size: .7em; line-height: .7em;}
.btn { padding: 25px 150px 25px 150px; margin-top: 50px; border: none; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; box-shadow: 0px 5px 0px rgba(0,0,0,.05); }
.btn-info, .btn-info:focus { background-color: #ffffff; color: #8c989f; }
.btn-info:hover { padding: 25px 175px 25px 175px; background: #fdba47; color: #000; }
.macbook { background: url('../images/macbook.svg') no-repeat; background-size: cover; width: 1125px; height: 935px; position: absolute; right: 50%; bottom: 70%; margin-right: -500px; -webkit-filter: drop-shadow(0px 10px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 10px 0px rgba(0,0,0,.05)); }
.whiteCoffee { background: url('../images/whiteCoffee.svg') no-repeat; background-size: cover; width: 275px; height: 275px; position: absolute; right: 15%; bottom: 55%; margin-right: -205px; -webkit-filter: drop-shadow(0px 35px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 35px 0px rgba(0,0,0,.05)); }
.stats { background: url('../images/stats.svg') no-repeat; background-size: cover; width: 590px; height: 325px; position: absolute; right: 25%; bottom: 0%; margin-right: -330px; -webkit-filter: drop-shadow(0px 35px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 35px 0px rgba(0,0,0,.05)); }
.earpods { background: url('../images/earpods.svg') no-repeat; background-size: cover; width: 535px; height: 300px; position: absolute; left: 25%; bottom: 0%; margin-left: -120px; -webkit-filter: drop-shadow(0px 10px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 10px 0px rgba(0,0,0,.05)); }
.iphone { background: url('../images/iphone.svg') no-repeat; background-size: cover; width: 280px; height: 421px; position: absolute; right: 85%; bottom: 15%; margin-right: 80px; -webkit-filter: drop-shadow(0px 10px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 10px 0px rgba(0,0,0,.05)); }
.sd-1 { background: url('../images/sdcard1.svg') no-repeat; background-size: cover; width: 55px; height: 78px; position: absolute; right: 83%; bottom: 75%; margin-right: 110px; -ms-transform: rotate(-35deg); /* IE 9 */ -webkit-transform: rotate(-35deg); /* Chrome, Safari, Opera */ transform: rotate(-35deg); -webkit-filter: drop-shadow(-5px 5px 0px rgba(0,0,0,.05)); filter: drop-shadow(-5px 5px 0px rgba(0,0,0,.05)); }
.sd-2 { background: url('../images/sdcard2.svg') no-repeat; background-size: cover; width: 55px; height: 78px; position: absolute; right: 83%; bottom: 80%; margin-bottom: 30px; margin-right: 25px; -ms-transform: rotate(-10deg); /* IE 9 */ -webkit-transform: rotate(-10deg); /* Chrome, Safari, Opera */ transform: rotate(-10deg); -webkit-filter: drop-shadow(-2px 7px 0px rgba(0,0,0,.05)); filter: drop-shadow(-2px 7px 0px rgba(0,0,0,.05)); }
 @media (max-width: 1366px) {
.btn { padding: 25px 115px 25px 115px; }
.btn-info:hover, .btn-info:focus { padding: 25px 140px 25px 140px; }
.info h1 { font-size: 105px; }
.info p { font-size: 26px; text-shadow: 0px 4px rgba(0,0,0,.05); }
.macbook { width: 843.75px; height: 701.25px; right: 50%; bottom: 75%; margin-right: -385px; -webkit-filter: drop-shadow(0px 7.5px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 7.5px 0px rgba(0,0,0,.05)); }
.whiteCoffee { width: 206.25px; height: 206.25px; right: 5%; bottom: 45%; margin-right: -50px; -webkit-filter: drop-shadow(0px 26.25px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 26.25px 0px rgba(0,0,0,.05)); }
.stats { width: 442.5px; height: 243.75px; right: 25%; bottom: 0%; margin-right: -205px; -webkit-filter: drop-shadow(0px 26.25px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 26.25px 0px rgba(0,0,0,.05)); }
.earpods { width: 401.25px; height: 225px; left: 25%; bottom: 0%; margin-left: -110px; -webkit-filter: drop-shadow(0px 7.5px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 7.5px 0px rgba(0,0,0,.05)); }
.iphone { width: 210px; height: 315.75px; right: 85%; bottom: 15%; margin-right: 65px; -webkit-filter: drop-shadow(0px 7.5px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 7.5px 0px rgba(0,0,0,.05)); }
.sd-blue { visibility: hidden; width: 41.25px; height: 58.5px; right: 80%; bottom: 75%; margin-right: 120px; -webkit-filter: drop-shadow(0px 3.75px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 3.75px 0px rgba(0,0,0,.05)); }
.sd-black { width: 41.25px; height: 58.5px; right: 80%; bottom: 70%; margin-bottom: 30px; margin-right: 120px; -webkit-filter: drop-shadow(0px 3.75px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 3.75px 0px rgba(0,0,0,.05)); }
}
 @media (max-width: 1023px), (max-height: 839px) {
.btn { padding: 20px 75px 20px 75px; margin-top: 25px; font-size: 14px; }
.btn-info:hover, .btn-info:focus { padding: 20px 100px 20px 100px; }
.info h1 { font-size: 105px; padding: 0 50px 0 50px; margin-bottom: 0px; }
.info p { font-size: 22px; text-shadow: 0px 3px rgba(0,0,0,.05); }
.macbook { width: 480px; height: 390px; right: 50%; bottom: 80%; margin-right: -205px; -webkit-filter: drop-shadow(0px 5px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 5px 0px rgba(0,0,0,.05)); }
.whiteCoffee { width: 100px; height: 100px; right: 15%; bottom: 50%; margin-right: -72px; margin-bottom: -40px; -webkit-filter: drop-shadow(0px 17.5px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 17.5px 0px rgba(0,0,0,.05)); }
.stats { width: 237px; height: 133px; right: 15%; bottom: 0%; margin-right: -45px; -webkit-filter: drop-shadow(0px 17.5px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 17.5px 0px rgba(0,0,0,.05)); }
.earpods { width: 150px; height: 115px; left: 15%; bottom: 0%; margin-left: 30px; -webkit-filter: drop-shadow(0px 5px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 5px 0px rgba(0,0,0,.05)); }
.iphone { width: 105px; height: 174px; right: 80%; bottom: 50%; margin-right: 0px; margin-bottom: -90px; -webkit-filter: drop-shadow(0px 5px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 5px 0px rgba(0,0,0,.05)); }
.sd-blue { visibility: hidden; width: 27.5px; height: 39px; right: 80%; bottom: 78%; margin-right: 100px; -webkit-filter: drop-shadow(0px 2.5px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 2.5px 0px rgba(0,0,0,.05)); }
.sd-black { visibility: hidden; width: 27.5px; height: 39px; right: 80%; bottom: 78%; margin-bottom: 60px; margin-right: 87px; -webkit-filter: drop-shadow(0px 2.5px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 2.5px 0px rgba(0,0,0,.05)); }
}
 @media (max-width: 479px), (max-height: 350px) {
/** /
.btn { padding: 15px 30px 15px 30px; margin-top: 0px; font-size: 12px; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; text-decoration: none; }
.btn-info:hover, .btn-info:focus { padding: 15px 55px 15px 55px; }
/**/
.info { top: 45%; }
.info h1 { font-size: 47px; padding: 0 50px 0 50px; margin-bottom: 0px; }
.info p { font-size: 14px; text-shadow: 0px 3px rgba(0,0,0,.05); }
.macbook { width: 281.25px; height: 233.75px; right: 50%; bottom: 82%; margin-right: -127px; -webkit-filter: drop-shadow(0px 2.5px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 2.5px 0px rgba(0,0,0,.05)); }
.whiteCoffee { width: 68px; height: 68px; right: 15%; bottom: 50%; margin-right: -46px; margin-bottom: -15px; -webkit-filter: drop-shadow(0px 8.75px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 8.75px 0px rgba(0,0,0,.05)); }
.stats { width: 147.5px; height: 81.25px; right: 25%; bottom: 0%; margin-right: -76px; -webkit-filter: drop-shadow(0px 8.75px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 8.75px 0px rgba(0,0,0,.05)); }
.earpods { width: 133.75px; height: 75px; left: 25%; bottom: 0%; margin-left: -40px; -webkit-filter: drop-shadow(0px 2.5px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 2.5px 0px rgba(0,0,0,.05)); }
.iphone { width: 70px; height: 105.25px; right: 85%; bottom: 50%; margin-right: -10px; margin-bottom: -35px; -webkit-filter: drop-shadow(0px 2.5px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 2.5px 0px rgba(0,0,0,.05)); }
.sd-blue { width: 13.75px; height: 19.5px; right: 80%; bottom: 78%; margin-right: 100px; -webkit-filter: drop-shadow(0px 1.25px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 1.25px 0px rgba(0,0,0,.05)); }
.sd-black { width: 13.75px; height: 19.5px; right: 80%; bottom: 78%; margin-bottom: 60px; margin-right: 87px; -webkit-filter: drop-shadow(0px 1.25px 0px rgba(0,0,0,.05)); filter: drop-shadow(0px 1.25px 0px rgba(0,0,0,.05)); }
}
 @media (max-width: 303px), (max-height: 200px) {
.macbook { visibility: hidden; }
.whiteCoffee { visibility: hidden; }
.stats { visibility: hidden; }
.earpods { visibility: hidden; }
.iphone { visibility: hidden; }
.sd-blue { visibility: hidden; }
.sd-black { visibility: hidden; }
}


/* ****************************** */
.btn { font-size: 1.8em; display: inline-block; font-weight:lighter;touch-action: manipulation; cursor: pointer;  }
.btn--svg { position: relative; height: 64px; width: 290px; overflow: hidden; border-radius: 42px; }
.btn--svg:hover .btn--svg__circle circle { -webkit-transform: scale(0); transform: scale(0); }
.btn--svg:hover .btn--svg__label { color: #fff; }
.btn--svg:hover .btn--svg__border--left path, .btn--svg:hover .btn--svg__border--right path { stroke-dasharray: 61.8204345703125 61.8204345703125; stroke-dashoffset: 0; -webkit-transition-delay: 0.25s; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; -webkit-transition-property: stroke-dashoffset; -moz-transition-delay: 0.25s; -moz-transition-duration: 0.5s; -moz-transition-timing-function: ease-in-out; -moz-transition-property: stroke-dashoffset; -ms-transition-delay: 0.25s; -ms-transition-duration: 0.5s; -ms-transition-timing-function: ease-in-out; -ms-transition-property: stroke-dashoffset; -webkit-transition-delay: 0.25s; transition-delay: 0.25s; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; transition-property: stroke-dashoffset; }
.btn--svg__label { -webkit-font-smoothing: antialiased; font-family: sans-serif; font-weight: bold; text-align: center; color: #8c989f; z-index: 3; width: 100%; -webkit-transition: color 0.5s ease-in-out; transition: color 0.5s ease-in-out; }
.btn--svg__circle circle { -webkit-transition: transform 0.5s ease-in-out; -webkit-transform: scale(1.1); -webkit-transform-origin: 50% 50%; -moz-transition: transform 0.5s ease-in-out; -moz-transform: scale(1.1); -moz-transform-origin: 50% 50%; -ms-transition: transform 0.5s ease-in-out; -ms-transform: scale(1.1); -ms-transform-origin: 50% 50%; -webkit-transition: -webkit-transform 0.5s ease-in-out; transition: -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }
.btn--svg__border--left path, .btn--svg__border--right path { stroke-dasharray: 61.8204345703125 61.8204345703125; -webkit-transition-duration: 0s; -webkit-transition-timing-function: ease-in-out; -webkit-transition-property: stroke-dashoffset; -webkit-transition-delay: 0.5s; -moz-transition-duration: 0s; -moz-transition-timing-function: ease-in-out; -moz-transition-property: stroke-dashoffset; -moz-transition-delay: 0.5s; -ms-transition-duration: 0s; -ms-transition-timing-function: ease-in-out; -ms-transition-property: stroke-dashoffset; -ms-transition-delay: 0.5s; -webkit-transition-duration: 0s; transition-duration: 0s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; transition-property: stroke-dashoffset; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }
.btn--svg__border--left path { stroke-dashoffset: -61.8204345703125; }
.btn--svg__border--right path { stroke-dashoffset: 61.8204345703125; }
.btn--svg svg, .btn--svg__label { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -webkit-transform-origin: 50% 50%; -moz-transform: translate(-50%, -50%); -moz-transform-origin: 50% 50%; -ms-transform: translate(-50%, -50%); -ms-transform-origin: 50% 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }
.c-white { color: white; }
.trailer { margin-bottom: 40px; }
.trailer--nano { margin-bottom: 10px; }
a { position: relative; text-decoration: none; color: red; }
a:after { content: ''; height: 1px; bottom: -4px; position: absolute; left: 5%; right: 95%; background: red; -webkit-transition: right 0.25s ease-in-out; transition: right 0.25s ease-in-out; }
a:hover:after { right: 5%; }