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

*{margin:0; padding:0; box-sizing: border-box; font-family: 'futura-heavy';}
a:active{background:none;}


*::-webkit-scrollbar {
    height: 2px;
	width:3px;
}
*::-webkit-scrollbar-thumb {
    height: 5px;
    background-color: #dc0961;
}
*::-webkit-scrollbar-track {
	background-color: #cfcdcd;    
}

@font-face {
    font-family: 'futura-heavy';
    src: url('../Fonts/Futura-Heavy.eot');
    src: url('../Fonts/Futura-Heavy.eot?#iefix') format('embedded-opentype'),
        url('../Fonts/Futura-Heavy.woff2') format('woff2'),
        url('../Fonts/Futura-Heavy.woff') format('woff'),
        url('../Fonts/Futura-Heavy.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Futura-bold';
    src: url('../Fonts/Futura-ExtraBold.eot');
    src: url('../Fonts/Futura-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../Fonts/Futura-ExtraBold.woff2') format('woff2'),
        url('../Fonts/Futura-ExtraBold.woff') format('woff'),
        url('../Fonts/Futura-ExtraBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../Fonts/Poppins-Medium.eot');
    src: url('../Fonts/Poppins-Medium.eot?#iefix') format('embedded-opentype'),
        url('../Fonts/Poppins-Medium.woff2') format('woff2'),
        url('../Fonts/Poppins-Medium.woff') format('woff'),
        url('../Fonts/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
body{background:#fff; background: linear-gradient(90deg,#fafbff 0%, #fafcff 100%);}
body.hidden{overflow:hidden;}
body.hidden:before{content:''; height:100%; width:100%; top:0; left:0; background:rgba(255,255,255,0.7); position: absolute; z-index: 10; backdrop-filter: blur(4px);}
img{max-width:100%; display: block; transition: ease 0.3s;}


.sec-head{ font:bold 34px 'Futura-bold'; color:#525458; display: flex; justify-content: center; align-content: center; margin-bottom:3vw;}
.sec-head img{width:32px; height: auto; align-self: center; margin-right:1vw; }
.section-1{width:100%; position: relative; overflow: hidden; z-index: 2; height: 100vh;}
.section-2, .section-3, .section-4,.section-5,.section-8{height:100vh; width:100%; position: relative; overflow: hidden; padding-top:10vh; z-index: 2;}
.section-7{padding-top:10vh; }
/*.section-1:before{content:''; background:#49d3fb; height:60%; width:50%; position: absolute; top:0; left:-30%; top:-20%; z-index: 3; filter: blur(5vw); border-radius: 100%; mix-blend-mode: hard-light;}
*/
.sec1-object{ position: absolute; top:20%; width:35%; padding-bottom:35%; z-index: 10; display: flex; transform: translate(0,-50%); left:10%;}
.sec1-object div.obj-1{ position: absolute; z-index: 2; width:52%; left:5%; top:52%; transform:translate(0, -50%) skew(-10deg, 5deg); filter:drop-shadow(0 0 3px #52d5fa) drop-shadow(0 0 10px #52d5fa);}
.sec1-object div.obj-2 {position: absolute; z-index: 1; width:52%; right:-2%; top:52%; transform:translate(0, -50%) skew(14deg, -13deg); filter:drop-shadow(0 0 3px #52d5fa) drop-shadow(0 0 10px #52d5fa); }

.sec1-object.aos-animate div.obj-1{animation:2s ease 0.6s anim-ob1 forwards;}
.sec1-object.aos-animate div.obj-2{animation:2s ease 0.6s anim-ob2 forwards;}

.banner-2cr{position: absolute; z-index: 2; width:45%; left:10%; top:52%; transform:translate(0, -50%) }

.banner-1,.banner-2,.banner-3,.banner-4{background:url("../img/banner-bg.png") center no-repeat; background-size:cover;}

.owl-carousel-header{z-index: 3!important;}
.owl-carousel-header .item{height:100vh;}

@keyframes anim-ob1{
	0%{transform:translate(0, -50%) skew(-10deg, 5deg)}
	100%{transform:translate(0, -50%) skew(0, 0)}
}
@keyframes anim-ob2{
	0%{transform:translate(0, -50%) skew(14deg, -13deg)}
	100%{transform:translate(0, -50%) skew(0, 0)}
}


.game-icons{position:absolute; width:100%; height:100%; z-index: 2;}
.game-icons img{position: absolute;}
.game-icons img:first-child{ top:-10%; left:42%; width:18%!important; height: auto;}
.game-icons img:nth-child(2){ top:40%; left:-9%; width:18%!important; height: auto;}
.game-icons img:nth-child(3){ top:45%; right:-17%; width:35%!important; height: auto;}
.game-icons img:last-child{ bottom:-10%; left:42%; width:18%!important; height: auto;}
.game-icons img{animation:2s glow infinite linear;}
@keyframes glow{
	0%{filter:drop-shadow(0 0 6px white); }
	50%{filter:drop-shadow(0 0 6px rgba(255,255,255,0.1)); }
	100%{filter:drop-shadow(0 0 6px white); }
}



.sec1-object:before{content:''; height:100%; width:100%; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); border:2px dashed #25008b; border-radius: 100%; filter:drop-shadow(2px 4px 6px black); opacity: 0.6;}
.sec1-object:after{content:''; display: block; background:#b61eab; width:80%; height: 8vw; margin:0 auto; left:0; right:0; margin:0 auto; position: absolute; bottom:-1vw; filter: blur(2.2vw); border-radius: 100%;}

.sec1-carousel{position:absolute!important; right:5%!important; top:50%; transform: translate(0,-50%); width: 40%!important; text-align: right; z-index: 4; opacity:0; transition:2s ease 0.5s; text-align: center;}
.active .sec1-carousel{opacity:1;}

.sec1-carousel .item{padding:20px;}
.owl-carousel-header .owl-nav{ position:absolute; bottom:10%; right:5%; margin:0!important;}
.owl-carousel-header.owl-carousel .owl-nav button.owl-next, .owl-carousel-header.owl-carousel .owl-nav button.owl-prev{font-size:20px!important; text-transform: uppercase; font-family:'Poppins'!important; background:#d5dae5; padding:3px 15px!important; border-radius:10px; margin:0 25px;}
.owl-carousel-header.owl-carousel .owl-nav button.owl-next:hover, .owl-carousel-header.owl-carousel .owl-nav button.owl-prev:hover{ background: linear-gradient(#dc0961 40%, #8b023c 120%);}

.owl-carousel-header .owl-dots{position:absolute; bottom:40px; margin:0 auto; left:0; right:0;}

.sec1-carousel h2{font:bold 3vw 'Futura-bold'; margin-bottom:2vw; color:#fff; text-transform: uppercase; position: relative;
text-shadow: 3px 1px 1px #ffcb00, 2px 2px 1px #830000, 4px 2px 1px #ffcb00, 3px 3px 1px #830000, 5px 3px 1px #873000;
 letter-spacing: 2px;}
.sec1-carousel h2:before{content: attr(data-text); position: absolute; text-shadow: 2px 2px 1px #760000, -1px -1px 1px #6d4000, -2px 2px 1px #e94aa1, 1px -1px 1px #6d4000;
width:100%; right:0;}

/*
.sec1-carousel h2:after{content: attr(data-text); position: absolute; 
width:100%; right:0; top:0; z-index: 2;
 background-color: #bbb;
  color: transparent;
  text-shadow: -2px -2px 2px rgba(255,255,255,0.5); 
  background-clip: text;	
}
*/


.sec1-carousel h4{font:bold 1.2vw 'Futura-bold'; text-transform: uppercase; margin-bottom:2vw; color:#f1f1f1; 
      border-width: 2px;
  border-style: solid; padding:20px 0;
  border-image: linear-gradient(to right, rgba(0,0,0,0), #feec00, rgba(0,0,0,0)) 1;  
}

.sec1-carousel p{font:normal 1vw 'Poppins'; text-transform: uppercase; color:#e0ba16; margin-bottom:2vw;}
.cta-blue{background:#4c34d0; border:0; border-radius:40px; padding:0.8vw 2vw; color:#fff; font:normal 1.3vw 'Poppins';  text-transform: uppercase; letter-spacing: 2px; box-shadow:  0.2vw 0.2vw 0 #c70860; text-decoration: none; cursor: pointer;  transition: ease 0.3s;}

.cta-blue:hover{background:#FF5722;}


.section-2{display:flex; align-items: center; justify-content: center; flex-direction: column;}
.section-2 .tiles-wrap{ background:#e70966; display:flex; padding:30px; justify-content:space-between; align-items: center; width:1200px; border-radius: 35px; position: relative; z-index: 2; height: 470px; margin-top: 20px;}

.section-2 .tiles-wrap:before{content:''; width:calc(100% - 30px); height:calc(100% - 30px); position: absolute;  top:15px; left:15px; border-radius: 25px; background: linear-gradient(150deg,rgba(152, 18, 212, 1) 40%, rgba(107, 22, 208, 1) 66%); z-index: -1;}
.section-2 .tiles-wrap:after{content:''; height:8px; width:100%; border-radius:100%; position:absolute; top:calc(100% + 30px); left:0; background:#000; filter: blur(8px); opacity:0.8;}
.section-2 .tiles-wrap .tile{padding:30px 30px 20px; width:32%; border-radius: 20px; position: relative; height: 420px; transition: ease 0.5s; position: relative; z-index: -1; overflow: hidden;}
.section-2 .tiles-wrap .tile:after{content:''; position:absolute; bottom:0; left:0; height: 300%; width:100%; background:linear-gradient(0deg,rgba(255, 255, 255, 1) 30%, rgba(221, 117, 87, 1) 60%, rgba(231, 9, 102, 1) 100%);  z-index: -1; transition: ease 0.3s;}
.section-2 .tiles-wrap img{display:block; }
.section-2 .tiles-wrap .tile-content{ padding:13px 0 0; text-align: center; }
.section-2 .tiles-wrap .tile-content h3{font-size:22px;}
.section-2 .tiles-wrap .tile-content p{font-size:20px; line-height: 1.5;}
.section-2 .tiles-wrap .tile-content a{font-size:18px; color:#fff; opacity:0; text-decoration:none; margin:10px 0; display: block;}

@keyframes tile-hover{	
	0%{background:linear-gradient(0deg, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 1) 100%);}	
	100%{
	}
}

.section-3{display:flex; align-items: center; justify-content:flex-end; flex-direction: column; position: relative;}
.section-3 .video-wrap{ display:flex; padding:30px; padding-bottom:0; justify-content:space-between; align-items: center; width:1200px; border-radius: 35px; position: relative; z-index: 2; margin-bottom:50px;}

.section-3 .phone{width:60%; padding-right:12%; display: flex; justify-content: flex-end; position: relative;}
.section-3 .phone .elem-01{width:55%; position: absolute; bottom:0; z-index: -1; left:-4%;}
.section-3 .phone > img{ width:300px; margin-left: auto;}
.section-3 .video-content{width:40%;}
.section-3:after{content:''; background: linear-gradient(150deg,#681ccf 40%, #3153c4 66%); position: absolute; height: 550px; width:100%; bottom:50px;}
.section-3 h3{font:bold 2.4vw 'Futura-heavy'; color:#04fbe1; margin-bottom:5%;}
.section-3 p{font:bold 1.3vw/1.5 'Futura-heavy'; color:#fff;}


.section-4{}
.section-4 .sec-head{margin-bottom:110px;}
.section-4 .f-tiles-wrap{ width:1000px; margin:0 auto; display: flex; justify-content: space-evenly; align-items: flex-end; flex-wrap: wrap; padding-top:3vw;}
.section-4 .f-tile{padding:15px; text-align: center; font-size:16px; width:250px; margin:0 20px;  margin-bottom:120px; height: 240px; position: relative; z-index: 2;}
.section-4 .f-tile:after{content:''; display:block; position: absolute; top:0; left:0; z-index: -1; border-radius:35px;}
.section-4 .f-tile:before{content:''; display: block; bottom:-6px; left:24%; position: absolute; filter:blur(6px); opacity: 0.4; border-radius:20px;
      width: 90%;
      height: 50px;
	background:black;
	z-index: -2;	
	transform: skew(-45deg);
}
.section-4 .f-tile .f-img{ border-radius:45px;}
.section-4 .f-tile .f-img img{display:block; border:3px solid #fff; border-radius:40px;}
.section-4 .f-tile .f-content{ transform: translate(0,-60px); transition: ease 0.3s;}
.section-4 .f-tile h2{margin:10px 0; color:#fff; font-size:20px;}
.section-4 .f-tile p{font-size:14px; margin-bottom:0;  color:#fff; opacity:0; position: absolute; transition: ease-in-out 0.4s; line-height: 0; }

.section-4 .f-tile:hover .f-content{transform: translate(0,-120px)}
.section-4 .f-tile:hover .f-content p{opacity:1; line-height: 1.4;}

.section-4 .f-tile:after{width:100%; height:100%; position: absolute; left:0; top:0;}
.section-4 .f-tile.grn:after, .section-4 .f-tile.grn .f-img{border:4px solid rgb(164 186 0); background: linear-gradient(140deg, rgb(198 218 43) 60%, rgb(171 188 30) 80%);}
.section-4 .f-tile.pink:after, .section-4 .f-tile.pink .f-img{border:4px solid rgb(191 4 81); background: linear-gradient(140deg, rgb(231 23 109) 60%, rgb(206 13 94) 80%);}
.section-4 .f-tile.blue:after, .section-4 .f-tile.blue .f-img{border:4px solid rgb(0 56 182); background: linear-gradient(140deg, rgb(0 105 246) 60%, rgb(0 84 200) 80%);}
.section-4 .f-tile.ylw:after, .section-4 .f-tile.ylw .f-img{border:4px solid #c6a422; background: linear-gradient(140deg, #edcb4a 60%, rgb(208 170 43) 80%);}
.section-4 .f-tile.prpl:after, .section-4 .f-tile.prpl .f-img{border:4px solid #4b28ad; background: linear-gradient(140deg, rgb(145 83 254) 60%, rgb(113 65 201) 80%);}


.section-5{background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(84, 85, 88, 0.1) 0%, rgba(255, 255, 255, 1) 30%); display:flex; align-items: center;}
.section-5 .sec-head{width:100%;}
.section-5 .steps-wrap{width:1200px; max-width:100%; margin:0 auto;display: flex; justify-content:space-between; align-items:center;flex-wrap: wrap;}
.section-5 .steps-wrap .steps-content{display:flex; width:40%; align-content: center; justify-content: flex-start; flex-wrap: wrap;}
.section-5 .steps-wrap .steps-content h3{color:#545558; font-size:28px; margin-bottom:30px;}
.section-5 .steps-wrap .steps-content p{color:#545558; font-size:20px; line-height: 1.6; margin-bottom:20px;}
.section-5 .steps-wrap .steps-content a{font-size:20px; display: block; text-decoration: none; color:#fc542f; transition: ease 0.2s;}
.section-5 .steps-wrap .steps-content a:hover{color:#03A9F4;}
.section-5 .steps-wrap .steps-content img{margin-top:20px;}
.section-5 .steps-wrap .steps-circle{width:45%; position: relative;}
.section-5 .step1, .section-5 .step2, .section-5 .step3, .section-5 .step4{ position: absolute; width:22%; z-index: 2; transition: ease 0.3s; cursor: pointer;}
.section-5 .steps-circle > span.active, .section-5 .steps-circle > span:hover{filter:drop-shadow(0 0 0.5vw #000);}

.section-5 .steps-circle > img{ animation: round 15s infinite linear;}
.section-5 .phone-changer{ position: absolute; top:4%; left: 27%; z-index: 10; width:45%;}


.tabContent h2, .more h2{color: #545558; font-size: 24px; margin:20px 0;}
.tabContent h5{color: #545558; font-size: 23px; margin:30px 0;}
.tabContent table td, .tabContent p, section.page-inside ol, .tabContent ul, .supportContainer p, .more p, .faq-wrap ul, .pp-content ul, .pp-content p{color:#545558; font-size:16px; line-height: 1.8; margin-bottom:15px;}

.supportContainer p b{color:#dc0961;}

.tabContent ul, .faq-wrap ul, .featurette ul{list-style:disc outside; margin-left:25px;}
.tabContent ol, .supportContainer ol, .more ol, .faq-wrap ol, .featurette ol, .pp-content ol{list-style:decimal outside; margin-left:30px;}
.tabContent ul li, .tabContent ol li, .pp-content li{margin-bottom:20px;}
.tabContent img, .more img{margin:0 auto; margin-bottom:30px; padding:10px; background: #e70966; border-radius:10px;}

.faq-wrap{width:100%;}
.faq-wrap .card-block{color: #545558; font-size: 16px; line-height: 1.8;}
.faq-wrap .card, .featurette .panel{padding:5px 0; border-bottom:1px solid #ccc;  margin-bottom:5px;}
.faq-wrap a{text-decoration:none;}
.faq-wrap h5, h4.panel-title{color:#545558; font-size:18px; line-height: 1.8;  display: flex; justify-content: space-between; align-items: center; cursor:pointer;}
.faq-wrap h5:after, h4.panel-title:after{content:''; height:10px; width:30px; background: url("../img/arrow-down.png") no-repeat center; transition: 0.2s;}
.faq-wrap .active h5:after, h4.panel-title.active:after{transform:rotate(180deg);}
.faq-wrap .active h5{color:#dc0961;}

h4.panel-title a{text-decoration:none; color:#545558;}
h4.panel-title.active a{color:#dc0961;}

.featurette p{color:#545558; font-size:20px; line-height: 1.8; margin-bottom:10px;}
.featurette p a{color:#dc0961; text-decoration:none;}

.tabContent{display:none;}
.tabContent.active{display:block; position: relative;}
.hindiTut{position:absolute; top:0; left:0; font-size:24px; font-weight: bold; color:#dc0961 ;}

.page-inside{overflow-x:hidden;}
section.page-inside{margin:0 auto; width:100%; max-width:100%; margin-top:130px; margin-bottom:50px; position: relative; z-index: 10; overflow: hidden;}
section.page-inside .wrap-inside{ display: flex; flex-wrap: wrap; width:1200px; max-width:100%; margin:0 auto;}
.resp-tabs-container{overflow: auto; height:calc(100vh - 300px);}
section.page-inside .wrap-inside h1{ margin:0 auto 3vw;}

.tabNav__scroll {
    width: 100%;
    overflow-x: auto;
    padding: 0;
    box-sizing: border-box;
}
.resp-tabs-container, .tabContent{width:100%;}
.tabNav__scroll{margin-bottom:20px;}
section.page-inside .resp-tabs-list{width:100%; display: flex; justify-content: space-between; }
section.page-inside .resp-tabs-list li{width:30%; height:50px; text-align: center; display: flex; justify-content: center; align-items: center; border-right:1px solid #fff; position: relative; cursor: pointer; transition: ease 0.3s; background:#f2f2f2; font-size:16px;}
section.page-inside .resp-tabs-list li span{position:relative; z-index: 2; display: block;}
section.page-inside .resp-tabs-list li:last-child{border:0;}
section.page-inside .resp-tabs-list li.resp-tab-active{background:linear-gradient(#dc0961 40%, #8b023c 120%); color:#fff;}
section.page-inside .resp-tabs-list li.resp-tab-active span:before, section.page-inside .resp-tab-item.resp-tab-active:before, section.page-inside .resp-tab-item.resp-tab-active:after{display:none;}

section.page-inside .resp-tabs-list.hindi li{font-size:14px; font-weight: bold;}
section.page-inside .resp-tabs-list.hindi li span:before{ font-weight: bold;}

.variations section.page-inside .resp-tabs-list li{width:160px;flex-shrink: 0;}

section.page-inside .resp-tabs-list li:before, section.page-inside .resp-tabs-list li:after {
    position: absolute;
    width: 100%;
    height: 0;
    left: 0px;
    content: '';
    background:linear-gradient(#dc0961 40%, #8b023c 120%);    
    transition: all 0.3s;	
}
section.page-inside .resp-tabs-list li span:before{
    position: absolute;
    color: #FFF;
    top: 0px;
    left: 0px;    
    overflow: hidden;
    content: attr(alt);
    transition:0.3s all 0.1s;
    transform: scale(1.2);
    opacity: 0;
}
section.page-inside .resp-tabs-list li:hover span:before {
    transform: scale(1);
    opacity: 1;
}
section.page-inside .resp-tabs-list li:before {
    top: 0px;
}
section.page-inside .resp-tabs-list li:after {
    bottom: 0px;
}
section.page-inside .resp-tabs-list li:hover:before, section.page-inside .resp-tabs-list li:hover:after {
    height: 100%;
}

/* Legal page */
.pp-content {    display: flex;

}
.pp-content h2, .pp-content a{color:#dc0961; margin-bottom:10px;}

.right-bar .content-div{display:none;}
.left-bar {    width: 30%;}
.left-bar ul {    list-style: inside none;    margin: 0;    padding: 0 25px 0 0;}
.left-bar ul li {    padding: 10px 15px 10px 30px; background: #f5f5f5; margin-bottom: 3px; line-height: 2; position: relative; font-size: 14px; cursor: pointer;}
.right-bar {    width: 70%;    height: 766px;    overflow: auto;    padding-right: 20px;}
.left-bar ul li.active-click:before {    transform: rotate(90deg);    transform-origin: center center;}
.left-bar ul li:before {    content: '►';    display: block;    position: absolute;    left: 10px;    top: 10px;    font-size: 14px;    transition: ease 0.2s;}
.left-bar ul li.active-click, .left-bar ul li:hover {    background: linear-gradient(#dc0961 40%, #8b023c 120%);    color: #fff;}

@keyframes round{
	0%{transform: rotate(0deg);}
	100%{transform: rotate(360deg);}
}


.section-5 .step1{left:-5%; top:10%;}
.section-5 .step2{right:-5%; top:10%;}
.section-5 .step3{right:-5%; bottom:10%;}
.section-5 .step4{left:-5%; bottom:10%;}

.section-6{height:100vh; display: flex; align-items: center;}
.section-7{display:flex; justify-content: center; flex-wrap: wrap; align-content: center; }
.widget-wrap{display: flex; justify-content: center; align-items: flex-start; padding-top:40px;}

/* elements animations */
.sect1-obj-1{position:absolute; top:50%; transform: translate(0,-50%); right:-15%; width:27%; animation:obj-elm-1 ease-in-out 30s infinite; transform-origin: center center; z-index: -1;}
.sect2-obj-1{position:absolute; top:50%; transform: translate(0,-50%); left:-15%; width:27%; animation:obj-elm-1 ease-in-out 30s infinite; transform-origin: center center; z-index: -1;}
.sect3-obj-1{position:absolute; bottom:50px; right:0; width:auto; animation:obj-elm-1 ease-in-out 30s infinite; transform-origin: center center; mix-blend-mode: luminosity; 
	z-index: 5;}
.sect4-obj-1{position:absolute; top:20%; transform: translate(0,-50%); left:-10%; width:27%; animation:obj-elm-1 ease-in-out 30s infinite; transform-origin: center center;}
.sect4-obj-2{position:absolute; bottom:0; right:0; width:18%; animation:fadeIn ease 5s forwards; transform-origin: center center; opacity:0;}

@keyframes obj-elm-1{
	0%{width:27%; opacity:0;}
	50%{width:40%;  opacity:1;}
	80%{width:27%; opacity:1;}
	100%{width:27%; opacity:0;}
}
@keyframes obj-elm-1{
	0%{opacity:0; right:-10%;}
	50%{opacity:1; right:0;}
	80%{opacity:1;}
	100%{opacity:0;}
}
@keyframes fadeIn{
	0%{opacity:0;}		
	100%{opacity:1;}
}


#phone-screen{
  height:100%;
  width:50%;
  transform-style:preserve-3d; 
  backface-visibility: hidden;
  margin:0;
  position: absolute; top:5%;
  left:25%;
	z-index: 20;
	transform:rotateY(0deg);
}

.front, .back{
  position: absolute;
  backface-visibility: hidden;
  height:auto;
  width:auto;  
  display:flex;
  justify-content: center;
  align-items:center;
  transform-style:preserve-3d;
  color: #fff;
  perspective: 1000px;  
}


.back{
  transform: rotateY( 180deg );
}

.front > p , .back > p {
  transform:translateZ(120px);
	position: absolute;
	width:74%;
	top:7%;
}

#phone-screen.r-active1{
	transform:rotateY(0deg);
	animation:rotate-card 1s ease-in-out;
}
#phone-screen.r-active2{
	transform:rotateY(0deg);
  animation:rotate-card 1s ease-in-out;
}
#phone-screen.r-active3{
  transform:rotateY(0deg);
  animation:rotate-card 1s ease-in-out;
}
#phone-screen.r-active4{
  transform:rotateY(0deg);
  animation:rotate-card 1s ease-in-out;
}

@keyframes rotate-card{
    100%{transform:rotateY(360deg);}
}


.testimonial-wrap{width:1100px; max-width:100%; margin:0 auto;}
.testimonial-wrap .owl-item{box-shadow: 0 0 40px #dadada inset; border-radius:10px; margin-bottom:130px; margin-top:130px;}
.testimonial-wrap .owl-item.active.center {    
	 box-shadow: 0 0 40px #c3074dfa inset;
	background:#fe0267;
	  position: relative; z-index: 2;
	transition: ease 0.6s;
	transform: scale(1.1) translate(0,-60px);	
}
.testimonial-wrap .owl-item.active.center p{color:#fff;}
.testimonial-wrap .owl-item.active.center .item > img{filter:invert()}
.testimonial-wrap .owl-item .item .user{width:120px; position: absolute; top:calc(100% - 40px); left:0; right:0; margin:0 auto;}
.testimonial-wrap .owl-item .item .user img{border-radius:100%; border:5px solid #fff; display: block;}

.testimonial-wrap .item{     
	text-align: center;
	border-radius:15px;
	padding:20px 30px;
	padding-bottom:60px;
}
.testimonial-wrap .item .coma{width:70px; display: inline-block; margin-bottom:20px;}

.videoplaylist .owl-carousel .owl-video-tn {
  background-size: cover;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
}

.videoplaylist .owl-video-frame {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoplaylist .owl-video-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.videoplaylist .owl-dots {
  text-align: center;
  margin-top: 20px;
}

.videoplaylist .owl-dot {
  display: inline-block;
}

.videoplaylist .owl-dot span {
  width: 11px;
  height: 11px;
  background-color: #ccc;
  border-radius: 50%;
  display: block;
  margin: 5px 3px;
}

.item-video {
    height: 300px;	
	transform: scale(0.9);
	transition: ease 0.4s;	
	border:10px solid #e70966;
	border-radius:10px;
	background:#000;
}
.owl-carousel.videoplaylist .owl-item{padding:20px;}
.owl-carousel.videoplaylist .owl-stage{padding:40px 0;}
.owl-video-wrapper{opacity:0.5;}
.center .item-video{
	opacity:1;
	transform: scale(1);		
	filter: drop-shadow(0 0 10px #000);
}
.owl-item iframe{height:100%;}
.center .item-video .owl-video-wrapper{opacity:1;}
.owl-carousel .owl-video-tn{background-size:100% auto!important; position: absolute; height: 100%; width:100%; top:0; left:0;}

.owl-carousel .owl-video-play-icon{background:url(../img/owl.video.play.png) no-repeat!important;  background-size:100%!important; height: 60px!important; width: 60px!important;}
.owl-carousel .owl-video-play-icon:hover{filter:drop-shadow(0 0 10px #fff); cursor: pointer;}


/* footer */
footer{background:#000000; display: flex; justify-content: center; padding:40px;}
footer h3{color:#fff; font-size:24px; width:100%; margin-bottom:10px;}
footer p, footer a{color:#fff; text-decoration: none; font-size:18px; padding:4px 0; display: block;}
footer>div{display:flex; flex-wrap: wrap; width:22%; padding:0 20px; align-content: flex-start;}
footer>div.download{justify-content: space-between;}
footer>div.download a{width:47%; }


.ocean { 
  height: 100%;
  width:100%;
  position:absolute;
  bottom:0;
  left:0;
  background:none;
}

.wave {
  background: url("../img/wave.svg") repeat-y center left; 
  position: absolute;
  top: -198px;
  width:50%;
  height: 6400px;
  animation: wave 50s infinite ease-in-out;
	z-index: 2;
	mix-blend-mode: multiply;
}

.wave+.wave {
	background: url("../img/wave2.svg") repeat-y center left; 
  top: -50%;
  animation: none;
  opacity: 1;
	z-index: 1;
	mix-blend-mode: normal;
}

@keyframes wave {
  0% {
    margin-top: 0;
	  opacity:1;
  }
	50%{opacity:0;}
  80% {
    margin-top: -1400px;
	  tra
  }
  100% {
    margin-top: -1600px;
	  opacity:1;
  }
}


.play-btn {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
	padding:20px;
  height: 80px;
  width: 80px;
  border-radius: 100%;
  box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25);
	position: absolute; right:25px; top:50%; transform: translate(0,-50%);
}
.play-btn >img{width:25px;}
.play-btn span {
  position: relative;
  font-size: 72px;
  top: 5px;
  left: -5px;
}
.play-btn::after {
  opacity: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -8px;
  left: -8px;
  right: 0;
  bottom: 0;
  content: "";
  height: 100%;
  width: 100%;
  border: 8px solid rgba(255, 255, 255, 0.8);
  border-radius: 100%;
  -webkit-animation-name: ripple;
          animation-name: ripple;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1);
          animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1);
  z-index: -1;
}
.play-btn::before {
  opacity: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -8px;
  left: -8px;
  right: 0;
  bottom: 0;
  content: "";
  height: 100%;
  width: 100%;
  border: 8px solid rgba(255, 255, 255, 0.8);
  border-radius: 100%;
  -webkit-animation-name: ripple;
          animation-name: ripple;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1);
          animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1);
  z-index: -1;
}

@keyframes ripple {
  0% {
    opacity: 0;
    transform: scale3d(0.7, 0.7, 1);
  }
  20%{opacity:1};
  100% {
    opacity: 0;
    transform: scale3d(1.5, 1.5, 1);
  }
}


.games.content {
    position: fixed;
    width: 600px;
    max-width: 90%;
    right: 100%;
    left: -600;
    top: 50%;
    transform: translate(0, -50%);
    height: 100vh;
    z-index: 101;
    padding: 20px;
    background: rgb(255 255 255 / 93%);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    transition: ease 0.52s;
    border-radius: 0px 40px 40px 0px;
}
.games.content span.click{
    position: absolute;
    background: rgb(255 255 255);
    left: 100%;
    top: 85%;
    transform: translate(0, -50%);
    padding: 6px;
    border-radius: 0px 20px 20px 0px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-right: 0;
    cursor: pointer;
    width: 150px;
    box-shadow: rgb(0 0 0 / 26%) 5px 1px 12px;	
}
.games.content span.click img{ transition: ease 0.4s;}
.games.content span.click.active img{
	transform:rotate(180deg);
}

.games.content.active {
    right: calc(100% - 600px);
}
.games .game-icon {
    text-align: center;
    width: 80px;
    margin: 40px 10px 0 0;
    cursor: pointer;
}
.games .wrap {
    width: 100%;
    display: flex;
    height: calc(100vh - 100px);
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    align-content: flex-start;
    padding-top: 0;
    overflow: auto;
}
.games.content h3 {
    font-family: 'futura-heavy';
    color: #625f58;
    text-align: left;
    font-size: 18px;
	margin-bottom:5px;
}
.games.content p {
    color: #625f58;
    font-family: 'futura-heavy';
    font-size: 14px;
}
.games .oGame-title {
    font-size: 13px;
    padding-top: 10px;
    color: #625f58;
    font-family: 'futura-heavy';
}
.games.content span.click img {
    width: 30px;
    height: auto;
    float: right;
}
.games.content span.click b {
    font-size: 14px;
    color: #656e75;
    position: absolute;
    white-space: pre;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    padding: 6px;
    opacity: 1;
    transition: ease 0.2s;
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0);
}

@media screen and (min-width: 1023px){
.download-mob{display:none!important;}
}
.download-mob{display:block; width:100%; background:rgba(0,0,0,0.5); position: fixed; left:0; bottom:0; z-index: 10; padding:10px; text-align: center;}
.download-mob a{background: #4c34d0; display: inline-block; border: 0; border-radius: 40px; padding: 10px 30px; color: #fff; font: normal 16px 'Poppins'; text-transform:uppercase; letter-spacing: 2px; box-shadow: 0.2vw 0.2vw 0 #c70860; text-decoration: none; }
.download-mob p{font:normal 12px 'Poppins'; color:#fff; padding:10px 0 0; }
.download-mob p span{color:#FFE500;}

@media screen and (orientation: landscape){		
	nav{position:fixed; top:0; left:50%; right:0; z-index: 100; width:840px; transform: translate(-50%,0);}
	nav > div{ font-family: 'Poppins'; font-weight: normal; padding:0 30px;
	background: linear-gradient(#dc0961 40%, #8b023c 120%); border-radius:0 0 10px 10px; border:3px solid #e70966;
	box-shadow: 0 4px 10px rgba(0,0,0,0.6)}
	nav>div div.social{ position: absolute; left:100%; width:130px; text-align: center; display: flex; justify-content: center;}
	nav>div div.social a{font-size:24px; margin:0 5px; color:#fff; filter:drop-shadow(2px 4px 6px black);}
	.page-inside nav>div div.social a{ color:#dc0961; filter:unset;}
	nav div ul{width:100%; display:flex; justify-content: space-between; align-items: center; list-style: none;}
	nav div > ul > li{text-align:center; position: relative; width:auto;}
	nav div a{color:#fff; text-decoration: none; letter-spacing:2px; padding:20px 0; margin:0; font-size:18px; display: block; width:auto; text-align: center; position: relative; cursor: pointer;}
	nav div > ul > li.dd > a:after{content:''; display: inline-block; width:18px; height: 20px; background: url("../img/download.png") no-repeat center; background-size:100% auto; margin-left:10px; vertical-align: middle;}

	nav > a.logo, .toggle-nav{display: none;}
	nav div a.logo{padding:0; width:55%; margin:0 auto;}
	nav div ul li ul{position:absolute; top:100%; left:-10px; display:none; width:calc(100% + 50px); background:linear-gradient(#dc0961 40%, #8b023c 120%); border:3px solid #e70966; border-top:0; padding:15px; text-align: left; border-radius:0 0 10px 10px;}
	nav div ul li ul li a{font-size:15px; padding:8px 0; text-align: left;}	
	nav div ul li ul button{display:none;}

	
	.section-2 .tiles-wrap .tile:hover .tile-content h3, .section-2 .tiles-wrap .tile:hover .tile-content p{color:#fff;}
	.section-2 .tiles-wrap .tile:hover .tile-content a{opacity:1; margin:20px 0;}
	.section-2 .tiles-wrap .tile:hover{	border-radius:20px 20px 0 0; transform: translate(0,-20px); padding:30px; height:480px; filter:drop-shadow(2px -8px 15px rgba(0,0,0,0.5))} 
	.section-2 .tiles-wrap .tile:hover:after{transform: translate(0,50%);height: 300%;}	
}
@media screen and (orientation: portrait){
	.owl-carousel-header{background:#000;}
	.social{display:flex; justify-content: center; padding:20px;}
	.social a{color:#fff; font-size:26px; padding:10px;}
	nav > a.logo{padding:0; width:50px; display: block; }
	nav > div a.logo{display: none;}
	
	section.page-inside .resp-tabs-list{flex-wrap: wrap; height: auto; overflow: auto;}
	section.page-inside .resp-tabs-list li, .variations section.page-inside .resp-tabs-list li{width:100%;}	
	.variations section.page-inside .resp-tabs-list.open{ height: 50vh;}
	
section.page-inside .wrap-inside{position:relative;}	
section.page-inside.learnTP .wrap-inside{padding-top:60px;}
section.page-inside .resp-tabs-list li {display: none;cursor: pointer;padding: 5px 10px; border-bottom:1px solid #e4e3e3; z-index: 1;}
section.page-inside .resp-tabs-list li:first-child {display: flex;border-top: 0px; position: sticky; top:0; z-index: 2;}
.resp-tabs-list {display: inline-block;padding: 0;border-radius: 4px;position: absolute; top:0; z-index: 4;}
section.page-inside .resp-tabs-list li:hover {background-color: #ddd;}
section.page-inside .resp-tabs-list li:first-child:hover {background-color: transparent;}
section.page-inside .resp-tabs-list.open li {display: flex;}


section.page-inside .resp-tabs-list li:first-child:after{content: ""; position:absolute;  top: 15px; left: calc(100% - 40px); display: block;  z-index: 5;  content: ""; font-size:25px;  height:20px; width:20px; background: url("../img/download.png") center no-repeat; background-size:100% auto;  transition: ease 0.2s; transform-origin: center center; display: block;}
section.page-inside .resp-tabs-list.open li:first-child:after{   transform: rotate(180deg);}	
	
	
	nav{position:sticky; top:0; left:0; width:100%; z-index: 11; display: flex;  justify-content: space-between; padding:10px; align-items: center; background: linear-gradient(#dc0961 40%, #8b023c 120%);}
	.hidden nav{background:none;}
	.toggle-nav{ width:38px; height:28px; background:none; position: relative; display: block; padding:0;}
	.toggle-nav span{display: block; position: absolute; height:5px; width: 100%; background: #fff; opacity: 1; left: 0; border-radius:10px;
    transition: .25s ease-in-out; transform-origin:center;
	}	
	.toggle-nav span:nth-child(1) {top: 0px;}
	.toggle-nav span:nth-child(2) {top: 10px;}
	.toggle-nav span:nth-child(3) {top: 20px;}	
	.toggle-nav.open span:nth-child(1) {top: 10px; transform: rotate(135deg); background:#dc0961;}
	.toggle-nav.open span:nth-child(2) {opacity: 0; left: -60px; }
	.toggle-nav.open span:nth-child(3) {top: 10px; transform: rotate(-135deg); background:#dc0961;	}
	
	nav div.menus{left:0; position: absolute; z-index: 10; font-family: 'Poppins'; font-weight: normal; background:linear-gradient(#dc0961 40%, #8b023c 120%); justify-content: center; align-items: center; width:60%; height: 100vh; top:0; padding:10px; transition:0.3s ease 0.2s; transform:translateX(-100%); overflow: auto; opacity: 0;}
	nav div.menus.active{transform:translateX(0); opacity: 1;}
	nav div.menus > ul > li{margin-bottom:10px; background-blend-mode: color; position: relative; display: flex; flex-wrap: wrap;}
	nav div.menus > ul > li a{background:rgba(255,255,255,0.1); padding:20px; color:#fff; text-decoration: none; width:1000%; display: flex;}
	nav div.menus > ul > li:nth-child(3){display:none;}
	nav div.menus > ul > li.dd > a:after{content:'>'; font-family: 'Poppins'; display:inline-block; color:#fff; font-size:25px; line-height: 1; margin-left:auto; transition: ease 0.2s;}
	nav div.menus > ul > li.dd.active > a:after{transform:rotate(90deg);}
	
	nav div.menus li.dd ul{width:100%; height:100%; z-index: 20; display: none; align-content: flex-start; flex-wrap: wrap; background:rgba(255,255,255,0.001); }
	nav div.menus li.dd.active ul{display:flex; overflow: auto;}
	nav div.menus li.dd ul > li{display:block; width:100%; background:rgba(255,255,255,0.1); border-bottom:1px solid rgba(255,255,255,0.2);}
	nav div.menus li.dd ul > li a{color:#fff; text-decoration:none; width:100%; display: block; transform: translate(0); padding-left:40px; font-size:14px;}
	nav div.menus ul li ul button{position: fixed; top:10px; border:0;  background:none; width:30px; left:10px;}
	

	.ocean{transform:rotate(70deg) scale(2.5) translate(-6%, 0); transform-origin: 17% 19%;}	
	.sec1-object{width:60%; padding-bottom: 60%; top:15%; left:0; right:0; margin:0 auto;}
	.sec1-carousel{left:0; right:0!important; margin:0 auto; width:80%!important; bottom:0; top:inherit; transform:translate(0,0)}
	.sec1-carousel h2{font-size:6vw;}
	.sec1-carousel h4{font-size:2.5vw;}
	.sec1-carousel p, .cta-blue{font-size:2.2vw;}
	.owl-carousel-header .owl-nav{width:100%!important; padding:20px 0; margin:0 auto; left:0; right:0;}	
	.sec-head, .sec-head img{font-size:3.5vw;}
	.owl-carousel-header .item{    background: url(../img/banner-bg-port.png); background-size:cover;}
	.sec1-object{width:80%; padding-bottom:80%; top:0; position: relative;}
	.sec1-carousel{width:100%!important; position: relative!important; margin-top:40px; padding:0 10%;}
	.owl-carousel-header .owl-item .item{height:100vh;}
	.banner-2cr{width:100%; left:0; position: static; transform: translate(0);}	
	.owl-carousel-header .item{height:auto; padding: 90px 0 0;}
	.sec1-carousel h2{font-size:10vw;}
	.sec1-carousel h4{font-size:5vw;}
	.sec1-carousel p{font-size:3.5vw; }
	.sec1-carousel p br{display:none;}

	
	
	.section-2{height:auto; padding:50px 0;}
	.section-2 .tiles-wrap{flex-wrap: wrap; width:500px; height: auto;}
	.section-2 .tiles-wrap .tile{width:100%; height: 480px; margin-bottom:20px;}
	.section-2 .tiles-wrap .tile:last-child{margin-bottom:0px;}
	.section-2 .tiles-wrap .tile:hover .tile-content a {
        opacity: 1; font-size:30px;
        margin: 15px 0; display: block;
    }
	.section-2 .tiles-wrap .tile:hover {		
	padding: 30px;	height: 530px; transform: scale(1.04); z-index: 2; transform-origin: center center;
	}
	.section-2 .tiles-wrap .tile:hover:after {
        transform: translate(0, 50%);
        height: 300%;
    }
	.section-2 .tiles-wrap .tile:hover .tile-content h3, .section-2 .tiles-wrap .tile:hover .tile-content p {
        color: #fff;
    }

	
	.sect4-obj-2{display:none;}
	
	.section-3{background: linear-gradient(150deg, #681ccf 40%, #3153c4 66%); justify-content: space-between;}
	.section-3 .sec-head{color:#fff;}
	.section-3 .video-wrap{width:100%; margin:0; flex-direction: column;}
	.section-3:after{display:none;}
	.section-3 .phone{padding:0;width:80%; margin:0 auto; order:2;}
	.section-3 .video-content{order:1; width:80%; margin-bottom:10%;}
	.section-3 h3{font-size:4.4vw;}
	.section-3 p{font-size:2.5vw;}
	
	.play-btn{right: 70%; top: 10%;}
	
	.section-4{height:auto;}
	.section-4 .f-tiles-wrap{width:100%;}
	
	.section-5{height:auto; padding:50px 30px;}
	.section-5 .steps-wrap .steps-circle{width:55%;}
	.section-5 .steps-wrap .steps-content p br{display:none;}
	
	.section-6{height:auto; padding:50px 0;}
	.testimonial-wrap{padding:0 20px;}
	
	footer{justify-content: space-between;}
	footer>div.download{flex-wrap:wrap;}
	footer>div.download a{width:100%;}
	footer h3{font-size:18px;}
	footer p, footer a{font-size:14px;}
	.games .game-icon{width: 66px;
        margin: 11px 10px 0 0;
	}
	.games.content span.click {
        top: 75%;
        width: 40px;
    }
	.games.content span.click b {
        display: none;
    }
	.games.content {
		height: 100vh;
		width: 275px;
		transform: translate(0, 0);
		top: 0;
		right: 100%;
	}
	.games.content.active {
		right: calc(100% - 275px)
    }
	
	section.page-inside{padding:0 20px;}
}

@media only screen and (min-width: 1030px) and (max-width: 1600px) {
	.section-2, .section-4, .section-5{height:auto;}
}
@media all and (min-width: 1023px) and (max-width: 1200px) and (orientation: landscape){
	.section-2, .section-3, .section-4, .section-5{padding-top: 13vh;}
	.section-2 .sec-head{margin-bottom:40px;}
	.section-2 .tiles-wrap{width:980px; height: 390px;}	
	.section-2 .tiles-wrap .tile{height: 330px;}
	.section-2 .tiles-wrap .tile-content h3{font-size:20px;}
	.section-2 .tiles-wrap .tile-content p{font-size:15px;}
	.section-2 .tiles-wrap .tile:hover{height: 400px;}
	
	.section-3 .video-wrap{width:1000px;}
	.section-3 h3{font-size:3vw;}
	.section-3 p{font-size:2vw;}
	.section-3:after{height:450px;}
	.sect3-obj-1{width:15%;}
	.section-3 .phone > img{width:250px;}
	
	.section-4 .f-tile{width:220px; height: 200px; margin-bottom:70px;}
	.section-4 .f-tile:hover .f-content{transform:translate(0,-110px);}
	.section-4 .f-tile h2{font-size:16px;}
	.section-4 .f-tile p{font-size:12px}
	
	
	.section-5 .steps-wrap{width:900px;}
	.section-5 .steps-wrap .steps-content h3{font-size:22px;}
	.section-5 .steps-wrap .steps-content p{font-size:14px;}
	
	.section-6 .sec-head{margin-bottom:0;}
	.testimonial-wrap{width:1000px;}
	
	section.page-inside{padding:0 20px;}
}


@media screen and (min-width: 1023px) and (max-width: 1050px) and (orientation: landscape){}

@media all and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){	
	.sec1-carousel{margin:0;}
	.sec1-carousel h2{font-size:6vw; }
	.sec1-carousel h4{font-size:2.5vw;}
	.sec1-carousel p, .cta-blue{font-size:2.2vw;}
	
	.owl-carousel-header .owl-item .item{padding:10% 10vw;}
	.owl-carousel-header .owl-nav{bottom:-1%;}
	
	
}

@media screen and (min-width: 667px) and (max-width: 935px) and (orientation: landscape){
	nav{width:600px;}
	nav div a.logo{width:50%;}
	nav div a{font-size:14px;}
	nav div > ul > li.dd > a:after{        width: 14px;        height: 14px;}
	nav div ul li ul{overflow:auto; height:300px;}
	.sec1-object{width: 30%; padding-bottom: 30%;}
	.owl-carousel-header.owl-carousel .owl-nav button.owl-next, .owl-carousel-header.owl-carousel .owl-nav button.owl-prev{    font-size: 1.5vw !important; margin:0 0 0 20px}
	.sec-head{font-size:3vw; }
	.sec-head img{width:3.2vw;}
	.section-2{height:auto; padding:50px 0 80px;}
	.section-2 .sec-head{margin-bottom:40px;}
	.section-2 .tiles-wrap{width:90%; height: 43.6vw;}	
	.section-2 .tiles-wrap .tile{height: 36vw; padding:2vw;}
	.section-2 .tiles-wrap .tile:hover{padding:2vw;}
	.section-2 .tiles-wrap .tile-content h3{font-size:20px;}
	.section-2 .tiles-wrap .tile-content p{font-size:15px;}
	.section-2 .tiles-wrap .tile:hover{height: 44.6vw;}
	
	.section-3{height:auto;}
	.section-3 .video-wrap{width:100%;}
	.section-3 .phone{width:60%; padding-right: 14%;}
	.section-3 .phone > img{width:50%;}
	.section-3 .phone .elem-01 {    width: 50%;}
	.section-3:after {height: 80vh;}
	
	.section-4{height:auto; padding:50px 50px 0;}
	.section-4 .f-tiles-wrap{width:100%;}
	.section-4 .f-tile{width:25vw; height: 24vw;}
	.sect4-obj-2{display:none;}
	.section-4 .f-tile h2{font-size:2vw;}
	.section-4 .f-tile p{font-size:1.5vw;}
	.section-5{height:auto; padding:50px 20px;}
	.section-5 .steps-wrap{justify-content: space-around;}
	.section-5 .steps-wrap .steps-content p br{display:none;}	
	.section-5 .steps-wrap .steps-content h3{font-size:3vw;}
	.section-5 .steps-wrap .steps-content p, .section-5 .steps-wrap .steps-content a{font-size:2vw;}
	.section-6{height:auto; padding:50px 20px;}
	.section-7{height:auto;}
	footer{justify-content: space-between;}	
	footer h3{font-size:2.5vw;}
	footer p, footer a{font-size:1.5vw;}
	
	section.page-inside{padding: 0 20px;}
	section.page-inside .resp-tabs-list li{font-size:1.4vw;}
	.resp-tabs-container{height:400px;}
}

@media all and (min-width: 320px) and (max-width: 767px) and (orientation: portrait){	
 .pp-content {        
		 display:flex;
		 width:100%;
    }
	 .pp-content .left-bar {
        display: none;
    }
	.pp-content .right-bar {
		width:100%;
		
	}
	.pp-content .right-bar .inside-content{padding:20px;}
	.pp-content .content-div h2.active-click{background:linear-gradient(#dc0961 40%, #8b023c 120%); color:#fff;}
	.pp-content .content-div h2 {
        padding: 10px 15px 10px 30px;
        background: #f5f5f5;
        margin-bottom: 3px;
        line-height: 2;
        font-size: 16px;
        cursor: pointer;
        position: relative;
        color: #1b1b1b;
    }
	.content-div h2:after{
	    content: '►';
        display: block;
        position: absolute;
        left: 10px;
        top: 12px;
        font-size: 14px;
        transition: ease 0.2s;
	}
	    .content-div h2.active-click:after {
        transform: rotate(90deg);
        transform-origin
}

@media all and (min-width: 320px) and (max-width: 500px) and (orientation: portrait){	
	.sec-head{font-size:6vw; padding:0; margin-bottom:50px;}
	.sec-head img{width:8vw; align-self: flex-start;}
	.owl-carousel-header .owl-nav{ bottom:0;}
	.section-2{height:auto; padding:20% 20px;}
	.section-2 .tiles-wrap{padding: 12px; border-radius: 25px;}
	.section-2 .tiles-wrap:before {content: ''; width: calc(100% - 10px); height: calc(100% - 10px); top: 5px; left: 5px; 
    border-radius: 22px;}
	.cta-blue{padding:1.8vw 4vw; font-size:2.8vw;}
	.ocean {transform: rotate(70deg) scale(3.5) translate(-37%, 3%); transform-origin: 3% 52%;    }
	.owl-carousel-header .owl-item{opacity:0; transition:0.3s ease;}
	.owl-carousel-header .owl-item.active{opacity:1;}
	.wave:first-child{opacity:0.2!important;}
	.game-icons img:nth-child(3){right:-7%;}
	.owl-carousel-header.owl-carousel .owl-nav button.owl-next, .owl-carousel-header.owl-carousel .owl-nav button.owl-prev{font-size:3vw!important}
	
	.section-2 .tiles-wrap{width:360px;}	
	.section-2 .tiles-wrap .tile{height:380px; margin-bottom: 10px;}
	.section-2 .tiles-wrap .tile:hover{height:420px;}
	.section-2 .tiles-wrap .tile-content h3{font-size:5vw;}
	.section-2 .tiles-wrap .tile-content p{font-size:4vw;}
	.section-2 .tiles-wrap .tile:hover .tile-content a{font-size:5vw;}
	
	.section-3, .section-4, .section-5{height:auto;}
	.section-3 .video-content{width:100%;}
	.section-3 .sec-head{margin:0;}
	.section-3 h3{font-size:6vw;}
	.section-3 p{font-size:4vw;}
	.section-3 .phone{ padding:0; width:100%;}
	.section-3 .phone .elem-01{width:70%;}
	.section-3 .phone > img{width:60%;}
	
	.testimonial-wrap .sec-head{margin-bottom: 0;}
	.testimonial-wrap .owl-carousel .owl-item{opacity:0.5; }
	.testimonial-wrap .owl-carousel .owl-item.active{opacity:1; }
	.testimonial-wrap{padding:0;}
	.testimonial-wrap .item{text-align: center; border-radius: 15px; padding: 15px 15px; padding-bottom: 48px;}
	.testimonial-wrap .item .coma{width:12vw;}
	.testimonial-wrap .owl-item{margin-bottom:50px;}
	.testimonial-wrap .owl-item p{font-size:4vw;}
	.testimonial-wrap .owl-item .item .user{width:20vw;}
	
	.section-5{padding:50px 20px 10px;}
	.section-5 .steps-wrap, .section-5 .steps-wrap .steps-content, .section-5 .steps-wrap .steps-content>div{width:100%; padding:0; text-align: center;}
	.section-5 .steps-wrap .steps-content img{display:none;}
	.section-5 .steps-wrap .steps-content{padding:0; margin-bottom: 30px;}
	.section-5 .steps-wrap .steps-content h3{font-size:6vw; margin-bottom:30px;}
	.section-5 .steps-wrap .steps-content p{font-size:4vw;}
	.section-5 .steps-wrap .steps-circle{width:calc(100% - 20px); margin:0 auto 50px;}
	
	.widget-wrap{flex-wrap:wrap; }
	.widget-wrap .facebook-widget, .widget-wrap .instagram-widget{width:350px; margin:20px auto!important;}
	.widget-wrap iframe, .widget-wrap .instagram-widget > div{width:100%!important; overflow: hidden;}
	
	.section-7{padding:50px 20px 10px;}
	
	footer {background: #000000; display: flex; justify-content: space-between; padding: 20px; flex-wrap: wrap; }
	footer>div{width:auto; padding:0; margin-bottom:30px;}
	footer>div:nth-child(3), footer>div:last-child{margin:0;}
	footer h3{font-size:4vw;}
	footer p, footer a{font-size:3.8vw;}
	footer>div.download a{width:30%;}
	
	/*inside page*/
	section.page-inside{margin-top:100px;}
	section.page-inside .sec-head{margin-bottom:30px;}
	section.page-inside table{width:100%;}	

}