/* start of css reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,th,var {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}

q:before,q:after {content:'';}
abbr,acronym { border:0;}
/* end of css reset */


* {
  box-sizing: content-box;
  font-family: Comfortaa, Sans-serif;
  font-weight: 400;
}


body {
  margin: 0;
}

a {
	text-decoration: none;
}

.wrapper{
  overflow: hidden;
}
.c-animator{
  margin-bottom: 0;
}

.ui-hero.c-animator {
  background: linear-gradient(45deg, #FCE38A, #f5ad4d, #fd81b5, #f74689, #ad5af3, #8a13ef );
  background-size: 450% 100%;
  animation: BackgroundGradient 30s ease infinite;
  min-height: 100vh;
  display: grid;
}

@keyframes BackgroundGradient {
  0%{background-position:0% 50%;}
  50%{background-position: 100% 50% }
  100%{background-position: 0% 50%}

}





.tiltme-plane {
  -webkit-perspective: 1000px;
          perspective: 1000px;
  display: grid;
  margin: auto;
  min-width: 375px;
}

/* this makes the children pop! */
.tiltme-plane:hover .popit {
  -webkit-transform: translateZ(40px);
          transform: translateZ(40px);
}

.tiltme {
  will-change: transform;
  max-width: 375px;
  min-width: 370px;
  border-radius: 30px;
  box-shadow: 1px 1px 34px -5px rgba(0,0,0,0.5);
  padding: 30px 10px;
    background-color: rgba(255,255,255,.4);
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  justify-content: space-around;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  transition: 0.4s background ease-out, 0.4s box-shadow ease-out, 0.4s -webkit-transform ease-out;
  transition: 0.4s transform ease-out, 0.4s background ease-out, 0.4s box-shadow ease-out;
  transition: 0.4s transform ease-out, 0.4s background ease-out, 0.4s box-shadow ease-out, 0.4s -webkit-transform ease-out;
}

.element {
  flex: 1 1 auto;
  display: inline-block;
  color: white;
  background: rgba(0, 0, 0, .7);
  margin: 10px;
  padding: 8px;
  text-align: center;
  -webkit-transform: translateZ(1px);
          transform: translateZ(1px);/* to move it out*/
  transition: .5s transform ease-out;
}

.popit{
  -webkit-transform: translateZ(40px);
          transform: translateZ(40px);
}

.element:hover {
  color: lightgreen;
}

.gradientText {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent;
/* https://uigradients.com */
background: #de6161;  /* fallback for old browsers */  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #2657eb, #de6161); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

#screenani {
  border: 0px solid rgba(0,0,0,.1);
  z-index: 1;
  top: 85px;
  position: absolute;
  will-change: transform;
  -webkit-transform: translateZ(100px);
  transform: translateZ(100px);
  width: 203px;
}

#screenshadow {
  z-index: 1;
  top: 85px;
  width: 213px;
  height: 400px;
  position: absolute;
  background: linear-gradient(247deg,#ffffff17 95px,transparent 8px)!important;
  -webkit-transform: translateZ(100px);
  transform: translateZ(100px);
}

.watermark {
    font-weight: bold;
    font-size: .8em;
    position: fixed;
    right: 20px;
    bottom: 5px;
    text-align: right;
    cursor: default;
    text-shadow: -1px -1px 1px #fff;
    text-shadow: 1px 1px 1px #000;
    color: white;
    opacity: 0.2;
    pointer-events: none;
}

.applogo {
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='svgbox' x='0px' y='0px' viewBox='0 0 435 510'%3E%3Cstyle%3E.applogo%7Bfill:none;stroke:%23fff;stroke-width: 43;stroke-linecap: round;%7D%3C/style%3E%3Cg class='applogo'%3E%3Cpath class='line_1' d='m 126.26377,127.91029 0.22716,115.47149'/%3E%3Cpath class='line_2' d='m 275.708,256.21191 0.28206,-115.47137'/%3E%3Cpath class='s_shape' d='M 63.188679,201.36302 C 49.591921,191.07466 38.717898,177.22076 31.954151,161.56912 25.190405,145.91748 22.552612,128.50436 24.377358,111.5517 26.187065,94.738763 32.392202,78.396256 42.339623,64.721509 56.129805,45.764108 76.882659,32.312601 99.433963,25.910188 c 18.956947,-5.38196 39.392687,-5.924867 58.377357,-0.641509 18.41941,5.126048 35.23703,15.696726 48.11321,29.830189 14.46195,15.874074 23.95959,36.357178 25.98113,57.735852 1.64075,17.35171 -1.65541,35.17772 -9.62264,50.67924 -3.53092,6.86998 -7.94359,13.26322 -12.83019,19.24529 -8.70466,10.65605 -18.97424,20.10877 -26.30189,31.75472 -6.86134,10.90483 -10.91738,23.46018 -12.50943,36.24528 -2.44907,19.66741 0.95481,40.07204 9.9434,57.73585 11.65183,22.89743 32.59213,40.71783 56.77358,49.39622 17.46296,6.26722 36.58674,7.89884 54.83135,4.52731 18.24461,-3.37154 35.5577,-11.75488 49.41393,-24.09335 12.51946,-11.14813 22.15778,-25.43005 28.22641,-41.05661 6.34785,-16.34555 8.81088,-34.31832 6.09435,-51.6415 -1.86767,-11.91 -6.16294,-23.42946 -12.50944,-33.67925 -5.9296,-9.57648 -13.56994,-17.97283 -21.49056,-25.98113 -1.06329,-1.07506 -2.13249,-2.14426 -3.20755,-3.20755'/%3E%3C/g%3E%3C/svg%3E");background-size:cover;background-repeat:no-repeat;background-size:100px auto;opacity:.2;width:100px;position:absolute;left:5px;bottom:0!important}.applogo:before{content:'';float:left;padding-bottom:117.24138%}.applogo:after{content:'';display:table;clear:both}