/* main css */
body {
    margin:0;
    padding:0;
    font-family: 'Roboto',Verdana,Helvetica,sans-serif;
    /*background-image: url(../img/background.png);*/
    background-color:#fff;
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
}

.mainContainer {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    background-image: url(../img/background.png);
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
}

.headerBar {
    width: 100%;
    height: 10%;
    margin-top: 0;
    background-color: #000;
    position: relative;
    z-index:3;
}

.logo {
        background-image: url(../img/GTlogo.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;
    margin: auto;
    /*width: 31%; */
    width:595px;
    height: 88%;
    display: block;
    position: relative;
    top: 5%;
}

.infoSection {
    color: #000;
    position: relative;
    /*width: 40%;*/
    width: 768px;
    height: 64%;
    margin: 3% auto;
    z-index:3;
}

.phone {
    background-image: url(../img/phone.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 48%;
    position: relative;
    height: 100%;
    float: left;
    margin:1%;
}

.textArea {
    /*background-color: #222;
    opacity: 0.7;*/
    width: 48%;
    position: relative;
    height: 73%;
    float: left;
    margin:1%;
}

.companyArea {
   background-image: url(../img/tangent.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-blend-mode: multiply;
    width: 48%;
    position: relative;
    height: 14%;
    float: left;
        margin-top: 8%;
}

p {

    font-size: 1em;
    font-weight:400;
    line-height:1.5em;
}

h1 {
    padding: 0px;
    margin: 2px;
    font-size: 1.7em;
    font-weight: 400;
}

.googleplay2 {
        background-image: url(../img/gplay.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
        display:block;
    position: absolute;
    height: 40px;
    width: 30%;
    top: 12px;
    right: 10px;
    opacity:1;
    z-index:4;
    display:inline-block;
    }

.googleplay {
    background-image: url(../img/gplay.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    height: 15%;
    width: 100%;
    bottom: 2%;
    display:none;
}



.textHead { 
    margin:10px; 
    padding: 10px; 
    font-weight:300;}

.infoText {margin:20px;}

.prevbtn {
    background-color: transparent;
    border: 2px solid #1a76d6;
    width: 40px;
    height: 40px;
    color: #fff;
    font-size: 1.5em;
    border-radius: 20px;
    top: 45%;
    position: absolute;
    right: 387px;
    z-index:10;
    outline:none;
    background-color:#1a76d6;
}

.nextbtn {
    background-color: transparent;
    border: 2px solid #1a76d6;
    width: 40px;
    height: 40px;
    color: #fff;
    font-size: 1.5em;
    border-radius: 20px;
    top: 45%;
    position: absolute;
    left: 770px;
    z-index:10;
    outline:none;
    background-color:#1a76d6;
}

.nextbtn:active, .prevbtn:active {
    background-color:#fff;
    color:#000;
    border: 2px solid #fff;
}

.screenshot {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    height: 81%;
    width: 100%;
    top: 10%;
}

.hidden {
    z-index:0;
}

.hide {
    display:none;
}

.gone {
    display:none;
}

.next { z-index: 2;}

.show{z-index:3;}

.sc1 {
    background-image: url(../img/screen1.png);
    }
    
.sc2 {
    background-image: url(../img/screen2.png);
    }
    
.sc3 {
    background-image: url(../img/screen3.png);
    }
    
.sc4 {
    background-image: url(../img/screen4.png);
}

.sc5 {
    background-image: url(../img/screen5.png);
    }
    
.sc6 {
    background-image: url(../img/screen6.png);
    }
    
.sc7 {
    background-image: url(../img/screen7.png);
    }
    
.sc8 {
    background-image: url(../img/screen8.png);
    }
    
.sc9 {
    background-image: url(../img/screen9.png);
    }
    
.sc10 {
    background-image: url(../img/screen10.png);
}

.sc11 {
    background-image: url(../img/screen11.png);
    }
    
.sc12 {
    background-image: url(../img/screen12.png);
    }

.sc13 {
    background-image: url(../img/screen13.png);
    }
    
.sc14 {
    background-image: url(../img/screen14.png);
    }
    
.sc15 {
    background-image: url(../img/screen15.png);
    }

.sc16 {
    background-image: url(../img/screen16.png);
    }
    
.mainContainer.shake {
  -webkit-animation-name: shaking;
	-webkit-animation-duration: 0.8s;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

@-webkit-keyframes shaking {
	0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
	10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
	40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
	50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
	100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

.ripples {
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index: 1;
}

/* css loader */

.cssload-loader {
                width: 500px;
                height: 500px;
                line-height: 500px;
                margin: auto;
                position: absolute;
                top: 0; left: 0; bottom: 0; right: 0;
                box-sizing: border-box;
                text-align: center;
                z-index: 2;
                text-transform: uppercase;
                                -o-text-transform: uppercase;
                                -ms-text-transform: uppercase;
                                -webkit-text-transform: uppercase;
                                -moz-text-transform: uppercase;
}

.cssload-loader:before,
.cssload-loader:after {
                opacity: 0;
                box-sizing: border-box;
                                -o-box-sizing: border-box;
                                -ms-box-sizing: border-box;
                                -webkit-box-sizing: border-box;
                                -moz-box-sizing: border-box;
                content: "\0020";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 5000px;
                border: 5px solid rgb(230,122,39);
                box-shadow: 0 0 49px rgba(230,122,39,0.38), inset 0 0 49px rgb(230,122,39);
                                -o-box-shadow: 0 0 49px rgba(230,122,39,0.38), inset 0 0 49px rgb(230,122,39);
                                -ms-box-shadow: 0 0 49px rgba(230,122,39,0.38), inset 0 0 49px rgb(230,122,39);
                                -webkit-box-shadow: 0 0 49px rgba(230,122,39,0.38), inset 0 0 49px rgb(230,122,39);
                                -moz-box-shadow: 0 0 49px rgba(230,122,39,0.38), inset 0 0 49px rgb(230,122,39);
}

.cssload-loader:after {
                z-index: 1;
                animation: cssload-gogoloader 2.3s infinite 1.15s;
                                -o-animation: cssload-gogoloader 2.3s infinite 1.15s;
                                -ms-animation: cssload-gogoloader 2.3s infinite 1.15s;
                                -webkit-animation: cssload-gogoloader 2.3s infinite 1.15s;
                                -moz-animation: cssload-gogoloader 2.3s infinite 1.15s;
}

.cssload-loader:before {
                z-index: 2;
                animation: cssload-gogoloader 2.3s infinite;
                                -o-animation: cssload-gogoloader 2.3s infinite;
                                -ms-animation: cssload-gogoloader 2.3s infinite;
                                -webkit-animation: cssload-gogoloader 2.3s infinite;
                                -moz-animation: cssload-gogoloader 2.3s infinite;
}

@keyframes cssload-gogoloader {
                0% {
                                transform: scale(0);
                                opacity: 0;
                }
                50% {
                                opacity: 1;
                }
                100% {
                                transform: scale(1);
                                opacity: 0;
                }
}

@-o-keyframes cssload-gogoloader {
                0% {
                                -o-transform: scale(0);
                                opacity: 0;
                }
                50% {
                                opacity: 1;
                }
                100% {
                                -o-transform: scale(1);
                                opacity: 0;
                }
}

@-ms-keyframes cssload-gogoloader {
                0% {
                                -ms-transform: scale(0);
                                opacity: 0;
                }

                50% {
                                opacity: 1;
                }
                100% {
                                -ms-transform: scale(1);
                                opacity: 0;
                }
}

@-webkit-keyframes cssload-gogoloader {
                0% {
                                -webkit-transform: scale(0);
                                opacity: 0;
                }
                50% {
                                opacity: 1;
                }
                100% {
                                -webkit-transform: scale(1);
                               opacity: 0;
                }
}

@-moz-keyframes cssload-gogoloader {
                0% {
                                -moz-transform: scale(0);
                                opacity: 0;
                }
                50% {
                                opacity: 1;
                }

                100% {
                                -moz-transform: scale(1);
                                opacity: 0;
                }

}

@media screen and (max-width: 890px) {
    
    .headerBar {
        height: 10%;
        margin-top: 0%;
    }
    
    .logo {
        width: 90%;
    }
    
    .infoSection {
        width: 100%;
    }
    .textArea {
        width:45%;
        margin:auto;
    }
    
    .companyArea {
        width:45%;
        margin:auto;
        margin-top:20px;
    }
    
    .prevbtn {
        right:inherit;
        left: 2%;
    }

    .nextbtn {
        left:inherit;
     right: 3%;
    }
    
}



@media screen and (max-width: 750px) {
    
    .headerBar {
        height: 63px;
        margin-top: 0%;
    }
    
    .logo {
        width: 53%;
        margin:10px;
    }
    
    .infoSection {
        width: 100%;
    }
    
    .phone {
        width:100%;
        float: none;
    }
    .textArea {
        width:95%;
        float: none;
        margin:auto;
        height: auto;
        padding-bottom: 20px;
    }
    
    .companyArea {
        width:100%;
        margin-top:20px;
        height:100px;
        opacity:1;
    }
    
   .prevbtn {
        left: 2%;
    }

    .nextbtn {
     right: 3%;
    }
    
    .mainContainer {
        overflow-y: scroll;
        overflow-x: hidden;
    }
    
    .googleplay2 {
        background-image: url(../img/gplay.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
        display:block;
    position: absolute;
    height: 40px;
    width: 30%;
    top: 12px;
    right: 10px;
    opacity:1;
    z-index:4;
    display:inline-block;
    }
    
    .googleplay { display:none;}
    
    .logo {
    background-position: 14% center;
    }
    
    .headerBar { opacity:1 }
    
}