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

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700&display=swap');

@import url('https://fonts.googleapis.com/css?family=Anton&display=swap');

@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap');


html, body { max-width: 100%; overflow-x: hidden; } /*prevent horizontal scrollbars*/

/* header */

#header							{ background-color: #334abe; padding: 1.3em 0 1.3em 0 !important; z-index: 999 !important; }
#header ul						{ margin-top: 1.5em; text-align: right;  }
#header a						{ font-family: 'Roboto', sans-serif; font-size: 1.1em; color: #fff; text-decoration: none; text-transform: uppercase; margin-left: 2.5em; letter-spacing: 1px; z-index: 999 !important; }
#header a:hover					{ color: #ffc001; }

#header a > i					{ font-size: 1.2em; color: #ffc001; text-decoration: none; padding-right: 0.5em; }


.logobg							{ 
	animation: fade-slide-down 2s cubic-bezier(0, 0.5, 0, 1) forwards;
	background: url(../images/Bubble_logoback.png) no-repeat;
	background-size: contain;
	animation: pulse 4s linear infinite;
	background-position-x: right;
}

/* Animations */

@keyframes fade-slide-down {
  0% {
    opacity: 0;
    transform: translateY(-4rem);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}


@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 5px;
  }
}


.logobg	img	{ width: 95%; height: auto; padding: 13% 10% 13% 10%;  }

#main		{ padding: 0!important; margin-top: 0em; 
background: linear-gradient(to bottom, #334bbd 20%, #0271ff 80%);

}
	
.TextLogo 	{ font-family: 'Ubuntu', sans-serif; color: #fff; font-size: 2.0em; font-weight: 100; margin-top: 1em;  }
#main h1 	{ font-family: 'Ubuntu', sans-serif; color: #fff; font-size: 2.0em; font-weight: 300; line-height: 1.3em; padding-bottom: 0.3em; }
#main h3 	{ font-family: 'Montserrat', sans-serif; color: #fff; font-size: 1.8em; font-weight: 200; line-height: 1.3em; padding-bottom: 0.3em; }

.smalltext 	{ font-family: 'Ubuntu', sans-serif; color: #fff; font-size: 1.6em; font-weight: 100; line-height: 1.6em; padding-bottom: 0.3em; }

.btn-google 	{ width: 14em; height: auto; display: inline-block;  }
.btn-Download	{ font-size: 1.3em; background-color: #ffc000; padding: 0.8em 1em 0.8em 1em; color: #000; 	 }
.btn-Download:hover	{ background-color: #000; color: #fff; }

.btn2-Download {
  font-size: 1.3em;
  background-color:#000 ;
  padding: 0.8em 1em 0.8em 1em;
  color: #fff;
}

.btn2-Download:hover {
  background-color: #1eaaf1;
  color: #000;
}



.particles {
/*  position: absolute;*/
  top: 0px;
  left: 10px;
  right: 10px;
  height: 30vh;
	z-index: 1 !important;
}


.particles {
  left: 10px;
  right: 10px;
/*  height: 100vh;*/
}

.particles .particle {
  position: absolute;
  opacity: 1;
  background: #fff;
  -webkit-animation-iteration-count: infinite !important;
  animation-iteration-count: infinite !important;
/*	border: 5px solid rgba(255, 255, 255, 1);*/
}

.particle:nth-child(1) {
  height: 25px;
  width: 25px;
  border-radius: 100%;
  -webkit-animation: floating 28s linear;
  animation: floating 28s linear;
  top: 65%;
  left: 10%;
}

.particle:nth-child(2) {
  height: 12px;
  width: 12px;
  border-radius: 100%;
  -webkit-animation: floating 35s linear;
  animation: floating 35s linear;
  top: 15%;
  left: 33%;
}

.particle:nth-child(25),
.particle:nth-child(3) {
  -webkit-animation: floating 28s linear;
  border-radius: 100%;
}

.particle:nth-child(3) {
  height: 21px;
  width: 21px;
  -webkit-animation: floating 28s linear;
          animation: floating 28s linear;
  top: 48%;
  left: 36%;
}

.particle:nth-child(4) {
  height: 16px;
  width: 16px;
  border-radius: 100%;
  -webkit-animation: floating 25s linear;
  animation: floating 25s linear;
  top: 85%;
  left: 75%;
}

.particle:nth-child(5) {
  height: 10px;
  width: 10px;
  border-radius: 100%;
  -webkit-animation: floating 32s linear;
  animation: floating 32s linear;
  top: 36%;
  left: 78%;
}

.particle:nth-child(6) {
  height: 22px;
  width: 22px;
  border-radius: 100%;
  -webkit-animation: floating 23s linear;
  animation: floating 23s linear;
  top: 87%;
  left: 18%;
}

.particle:nth-child(7) {
  height: 16px;
  width: 16px;
  border-radius: 100%;
  -webkit-animation: floating 36s linear;
  animation: floating 36s linear;
  top: 63%;
  left: 78%;
}

.particle:nth-child(8) {
  height: 17px;
  width: 17px;
  border-radius: 100%;
  -webkit-animation: floating 27s linear;
  animation: floating 27s linear;
  top: 35%;
  left: 76%;
}

.particle:nth-child(9) {
  height: 15px;
  width: 15px;
  border-radius: 100%;
  -webkit-animation: floating 31s linear;
  animation: floating 31s linear;
  top: 20%;
  left: 70%;
}

.particle:nth-child(10) {
  height: 13px;
  width: 13px;
  border-radius: 100%;
  -webkit-animation: floating 32s linear;
  animation: floating 32s linear;
  top: 42%;
  left: 23%;
}

.particle:nth-child(11) {
  height: 14px;
  width: 14px;
  border-radius: 100%;
  -webkit-animation: floating 30s linear;
  animation: floating 30s linear;
  top: 62%;
  left: 17%;
}

.particle:nth-child(12) {
  height: 13px;
  width: 13px;
  border-radius: 100%;
  -webkit-animation: floating 29s linear;
  animation: floating 29s linear;
  top: 9%;
  left: 63%;
}

.particle:nth-child(13) {
  height: 14px;
  width: 14px;
  border-radius: 100%;
  -webkit-animation: floating 21s linear;
  animation: floating 21s linear;
  top: 14%;
  left: 30%;
}

.particle:nth-child(14) {
  height: 11px;
  width: 11px;
  border-radius: 100%;
  -webkit-animation: floating 34s linear;
  animation: floating 34s linear;
  top: 29%;
  left: 33%;
}

.particle:nth-child(15) {
  height: 17px;
  width: 17px;
  border-radius: 100%;
  -webkit-animation: floating 23s linear;
  animation: floating 23s linear;
  top: 68%;
  left: 31%;
}

.particle:nth-child(16) {
  height: 18px;
  width: 18px;
  border-radius: 100%;
  -webkit-animation: floating 21s linear;
  animation: floating 21s linear;
  top: 29%;
  left: 57%;
}

.particle:nth-child(17) {
  height: 18px;
  width: 18px;
  border-radius: 100%;
  -webkit-animation: floating 32s linear;
  animation: floating 32s linear;
  top: 49%;
  left: 21%;
}

.particle:nth-child(18) {
  height: 7px;
  width: 7px;
  border-radius: 100%;
  -webkit-animation: floating 37s linear;
  animation: floating 37s linear;
  top: 35%;
  left: 94%;
}

.particle:nth-child(19) {
  height: 10px;
  width: 10px;
  border-radius: 100%;
  -webkit-animation: floating 35s linear;
  animation: floating 35s linear;
  top: 42%;
  left: 33%;
}

.particle:nth-child(20) {
  height: 18px;
  width: 18px;
  border-radius: 100%;
  -webkit-animation: floating 35s linear;
  animation: floating 35s linear;
  top: 94%;
  left: 20%;
}

.particle:nth-child(21) {
  height: 24px;
  width: 24px;
  border-radius: 100%;
  -webkit-animation: floating 37s linear;
  animation: floating 37s linear;
  top: 7%;
  left: 23%;
}

.particle:nth-child(22) {
  height: 24px;
  width: 24px;
  border-radius: 100%;
  -webkit-animation: floating 34s linear;
  animation: floating 34s linear;
  top: 49%;
  left: 33%;
}

.particle:nth-child(23) {
  height: 25px;
  width: 25px;
  border-radius: 100%;
  -webkit-animation: floating 29s linear;
  animation: floating 29s linear;
  top: 82%;
  left: 58%;
}

.particle:nth-child(24) {
  height: 14px;
  width: 14px;
  border-radius: 100%;
  -webkit-animation: floating 32s linear;
  animation: floating 32s linear;
  top: 60%;
  left: 90%;
}

.particle:nth-child(25) {
  height: 25px;
  width: 25px;
  -webkit-animation: floating 28s linear;
          animation: floating 28s linear;
  top: 53%;
  left: 85%;
}

.particle:nth-child(26) {
  height: 23px;
  width: 23px;
  border-radius: 100%;
  -webkit-animation: floating 28s linear;
  animation: floating 28s linear;
  top: 63%;
  left: 94%;
}

@-webkit-keyframes floating {
  0% {
    -webkit-transform: translate(0, 0) scale(0.5);
    transform: translate(0, 0) scale(0.5);
    opacity: 0;
  }
  5% {
    opacity: 0.1;
  }
  50% {
    -webkit-transform: translate(0, -250px) scale(1.4);
    transform: translate(0, -250px) scale(1.4);
  }
  95% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, -500px) scale(0.5);
    transform: translate(0, -500px) scale(0.5);
  }
}

@keyframes floating {
  0% {
    -webkit-transform: translate(0, 0) scale(0.5);
    transform: translate(0, 0) scale(0.5);
    opacity: 0;
  }
  5% {
    opacity: 0.1;
  }
  50% {
    -webkit-transform: translate(0, -250px) scale(1.4);
    transform: translate(0, -250px) scale(1.4);
  }
  95% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, -500px) scale(0.5);
    transform: translate(0, -500px) scale(0.5);
  }
}
     









/* WAVE ANIMATION */



body {
/*	
	background-image: linear-gradient(#334bbd, #0271ff);
  	overflow: hidden;
    height: 100%;
*/
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;	
}





.waveWrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
	z-index: -1;
}
.waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    bottom: -1px;
    background-image: linear-gradient(to bottom, #334bbd 20%, #0271ff 80%);
}
.bgTop {
    z-index: 15;
    opacity: 0.5;
}
.bgMiddle {
    z-index: 10;
    opacity: 0.75;
}
.bgBottom {
    z-index: 5;
}
.wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
}
.waveTop {
    background-size: 50% 100px;
}
.waveAnimation .waveTop {
  animation: move-wave 3s;
   -webkit-animation: move-wave 3s;
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
}
.waveMiddle {
    background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
    animation: move_wave 10s linear infinite;
}
.waveBottom {
    background-size: 50% 100px;
}
.waveAnimation .waveBottom {
    animation: move_wave 15s linear infinite;
}

@keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}




/*----------------------------SECOND SCREEN----------------------*/

#Screen-Two	.row 			{ background-image: url(../images/Second_screen/bg_screen02-new.jpg); background-size: contain; background-repeat: no-repeat; min-height: 550px;  }
#Screen-Two	h1 				{ font-size: 3em; color: #7b85ca;   }
#Screen-Two	h2 				{ font-size: 1.3em; color: #333;   }
#BoyGirlDiv					{ margin-top: 7%; position:relative; }
#Screen-Two .Girl 			{ float: left; margin-top: 4.6em; margin-left: 23%; position: absolute; z-index: 0; }
#Screen-Two .Girl img 		{ width: 80%; height: auto }
#Screen-Two .Boy 			{ float: right; margin-right: 20%; z-index: 100 !important;  position:sticky;  }
#Screen-Two .Boy img 		{ width: 80%; height: auto }

#Screen-Two .one   			{ width: 400px; float: left; position:relative;  }
#Screen-Two .one:before 	{ content: ""; display: inline-block; background: url("../images/Second_screen/icon_01.gif") no-repeat top right;
    width: 106px; height: 108px; float: left; margin-right: 2em; }

#Screen-Two .two   			{ width: 400px; float: left; margin-left: -0em; margin-top: 3em; position:relative; }
#Screen-Two .two:before 	{ content: ""; display: inline-block; background: url("../images/Second_screen/icon_03.gif") no-repeat top right;
    width: 106px; height: 135px; float: left; margin-right: 2em; }

#Screen-Two .three 			{ width: 400px; float: left; margin-left: -0em; position: absolute; top: 0px; right: 0px; text-align: right }
#Screen-Two .three:before 	{ content: ""; display: inline-block; background: url("../images/Second_screen/icon_02.gif") no-repeat top right;
    width: 103px; height: 135px; float: right; margin-left: 1.5em; }


#Screen-Two .four  			{ width: 400px; float: right; margin-top: 15em; margin-right: -5em; position: absolute;  right: 0px; text-align: right }
#Screen-Two .four:before 	{ content: ""; display: inline-block; background: url("../images/Second_screen/icon_04.gif") no-repeat top right;
    width: 125px; height: 126px; float: right; margin-left: 1.5em; }


/*----------------------------THREE SCREEN----------------------*/


#Screen-Three  				{ margin-top: 3em; padding-left: 0 !important; padding-right: 0 !important; }
#Screen-Three .one 			{ background-color: #2732EB; color: #bdd3f8; padding: 2em 0 2em 3em ; }
#Screen-Three .one h1		{ font-family: 'Anton', sans-serif; font-size: 4em; letter-spacing: 1px;  }
#Screen-Three .one h3		{ font-family: 'Roboto', sans-serif; font-size: 1.5em; line-height: normal; }

#Screen-Three .two 			{ background-color: #f7f7f7; text-align: center; padding: 1em; }
#Screen-Three .two img		{ margin: auto; max-width: 30%; height: auto;  }
#Screen-Three .two h3		{ font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 2em; color: #1a237f;  }

#Screen-Three .three 		{ background-color: #ffa300; text-align: center; padding: 1em; }
#Screen-Three .three img	{ margin: auto; max-width: 30%; height: auto;  }
#Screen-Three .three h3		{ font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 2em; color: #1a237f;  }
#Screen-Three .three h4		{ font-family: 'Roboto', sans-serif; font-size: 1.4em; color: #fff;  }

#Screen-Three .four 		{ background-color: #3D5AFE; text-align: center; padding: 2em 1em 1em 1em; }
#Screen-Three .four img		{ margin: auto; max-width: 30%; height: auto;  }
#Screen-Three .four h3		{ font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 2em; color: #FFCA28;  }
#Screen-Three .four h4		{ font-family: 'Roboto', sans-serif; font-size: 1.4em; color: #fff;  }

#Screen-Three .five 		{ background-color: #1a237f; text-align: center; padding: 2em 1em 1em 1em; }
#Screen-Three .five img		{ margin: auto; max-width: 30%; height: auto;  }
#Screen-Three .five h3		{ font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 2em; color: #bdd5fb;  }
#Screen-Three .five h4		{ font-family: 'Roboto', sans-serif; font-size: 1.4em; color: #bdd5fb;  }

#Screen-Three .six 			{ background-color: #0c68f1; padding: 0em 0em 0em 0em; }
#Screen-Three .six img		{ margin: auto;   }

#Screen-Three .seven 		{ background-color: #f7f7f7; text-align: center; padding: 1em; }
#Screen-Three .seven img	{ margin: auto; max-width: 50%; height: auto;  }
#Screen-Three .seven h3		{ font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 2em; color: #1a237f;  }


.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}



/* Spin Effect */
.spin-effect-parent  { 
						-webkit-transition: background-color 2s ease-out;
						-moz-transition: background-color 2s ease-out;
						-o-transition: background-color 2s ease-out;
						transition: background-color 2s ease-out;
					}

.spin-effect-parent:hover a { color: #ccc; text-decoration: none }
.spin-effect-parent:hover h3 { color: #ffc000 !important; }

.spin-effect-parent:hover {
	background-color: #000 !important;
	color: #ccc;
	text-decoration: none !important;
}

.spin-effect-parent:hover > a > .spin {
	-webkit-animation: spinAround 1s linear infinite;
	-moz-animation: spinAround 1s linear infinite;
	animation: spinAround 1s linear infinite;
}

/*
@-webkit-keyframes spinAround {
	from {
		-webkit-transform: rotate(0deg)
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}
@-moz-keyframes spinAround {
	from {
		-moz-transform: rotate(0deg)
	}
	to {
		-moz-transform: rotate(360deg);
	}
}
@keyframes spinAround {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(360deg);
	}
}
*/


@-webkit-keyframes spinAround {
  0% { transform: scale(1); }
	50% { transform: scale(1.2);}
  100% { transform: scale(1); }
}
	
@-moz-keyframes spinAround {
  0% { transform: scale(1); }
	50% { transform: scale(1.2);}
  100% { transform: scale(1); }
}
	
@keyframes spinAround {
  0% { transform: scale(1); }
	50% { transform: scale(1.2);}
  100% { transform: scale(1); }
}



/* Shake Effect */
.shake-effect-parent:hover a { color: #ccc; text-decoration: none }
.shake-effect-parent:hover h3 { color: #ffc000 !important; }

.shake-effect-parent:hover {
	background-color: #000 !important;
	color: #ccc;
	text-decoration: none !important;
}

.shake-effect-parent:hover > a > .shake {
	-webkit-animation: shake 2s linear infinite;
	-moz-animation: shake 2s linear infinite;
	animation: shake 2s linear infinite;
}


@-webkit-keyframes shake {
 from {
    -webkit-transform: rotate(10deg);
 }
 to {
   -webkit-transform-origin:center center;
   -webkit-transform: rotate(-10deg);
 }

}

/*----------------------------FOUR SCREEN----------------------*/

#Screen-Four 	{ padding: 5em 1em 5em 1em; background-color: #004bfc; margin-top: 0em; min-height: 700px; }
#Screen-Four > .container { position: relative !important; padding: 5em 1em 10em 1em; background-color: #004bfc; }

#Screen-Four  h1 { font-family: 'Comfortaa', cursive; font-weight: 500; font-size: 2.3em; color: #fff; line-height: 1.3em; margin-top: 2em; }

#Screen-Four  ul { list-style: none; font-family: 'Comfortaa', cursive; font-weight: 500; font-size: 2em; color: #fff; margin-top: 2em; }

#Screen-Four  li::before { content: "•"; color: #fdc00d; padding-right: 0.5em; margin-left: -1.4em; }

.Screen 		{ position: absolute; top: 3em; right: 30rem;  z-index: 0;  }
.Screen img 	{ width: 80%; height: auto; -ms-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform: rotate(-5deg); }


.Mobile 		{ position: absolute; right: 0; top: 0; z-index: 100;  }
.Mobile img 	{ width: 80%; height: auto; }

.trangles1 		{ position: absolute; right: 65rem; top: 0; }
.trangles1 img 	{ width: 50%; height: auto; -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }

.trangles2 		{ position: absolute; right: 60rem; top: 29rem; }
.trangles2 img 	{ width: 33%; height: auto; -ms-transform: rotate(55deg); -webkit-transform: rotate(55deg); transform: rotate(55deg); }

.trangles3 		{ position: absolute; right: 63rem; top: 48rem; }
.trangles3 img 	{ width: 55%; height: auto; -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }

.trangles4 		{ position: absolute; right: 3rem; top: 0; }
.trangles4 img 	{ width: 45%; height: auto; -ms-transform: rotate(-150deg); -webkit-transform: rotate(-150deg); transform: rotate(-150deg); }


.trangles5 		{ position:absolute; right: 5em; top: 26rem;  }
.trangles5 img 	{ width: 33%; height: auto; -ms-transform: rotate(-150deg); -webkit-transform: rotate(-150deg); transform: rotate(-100deg); }

.trangles6 		{ position: absolute; right: 3rem; top: 48rem; }
.trangles6 img 	{ width: 55%; height: auto; -ms-transform: rotate(-150deg); -webkit-transform: rotate(-150deg); transform: rotate(-90deg); }



/*----------------------------FIVE SCREEN----------------------*/

#Screen-Five 	{ min-height: 650px; margin-top: 0em; padding-bottom: 12em; padding-top: 2em; background-image: url(../images/fifth_screen/bg_screen05.jpg); background-size: cover; background-repeat: no-repeat; text-align: center; }

#Screen-Five h1 { font-family: 'Comfortaa', cursive; font-weight: 500; font-size: 3em; color: #48abfe;  line-height: 1.3em; margin-top: 3em; }
#Screen-Five p { font-family: 'Comfortaa', cursive; font-weight: 500; font-size: 1em; color: #48abfe;  line-height: 1.3em; margin: 1em 0 5em 0; }

.video-1 		{ width: 255px; height: 140px; background-image: url(../images/fifth_screen/c.jpg); margin: 1em; border-radius: 5px; }
.video-2 		{ width: 255px; height: 140px; background-image: url(../images/fifth_screen/p.jpg); margin: 1em; border-radius: 5px; }
.video-3 		{ width: 255px; height: 140px; background-image: url(../images/fifth_screen/g.jpg); margin: 1em; border-radius: 5px; }
.video-4 		{ width: 255px; height: 140px; background-image: url(../images/fifth_screen/f.jpg); margin: 1em; border-radius: 5px; }
#Screen-Five i 	{ font-size: 3.5em; color: #fff; margin-top: 0.8em; }

.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
    text-align: center;
}


/*----------------------------SIX SCREEN----------------------*/

#Screen-Six 								{ min-height: 630px;  padding: 5em 0em 0em 0em; background-color: #ffa300; margin-top: 0em; }
#Screen-Six h1	{ font-family: 'Montserrat', sans-serif; font-weight: 200; font-size: 2.6em; color: #fff; line-height: 1.3em; margin-top: 0em;margin-bottom: 2em;}

.student { position: relative; bottom: -3.8em; }

.trangles-container { position: relative; }


#Screen-Six > div > div > .trangles1 		{ position: absolute; left: 0rem; top: 0; }
#Screen-Six > div > div > .trangles1 img 	{ width: 20px; height: auto; -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); 														transform: rotate(90deg); }

#Screen-Six > div > div > .trangles2 		{ position: absolute; left: 0rem; top: 30rem; }
#Screen-Six > div > div > .trangles2 img 	{ width: 20px; height: auto; -ms-transform: rotate(55deg); -webkit-transform: rotate(55deg); 														transform: rotate(55deg); }

#Screen-Six > div > div > .trangles3 		{ position: absolute; left: 40rem; top: 0rem; }
#Screen-Six > div > div > .trangles3 img 	{ width: 20px; height: auto; -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); 
												transform: rotate(0deg); }

#Screen-Six > div > div > .trangles4 		{ position: absolute; left: 35rem; top: 27rem; }
#Screen-Six > div > div > .trangles4 img 	{ width: 15px; height: auto; -ms-transform: rotate(-150deg); -webkit-transform: rotate(-150deg); 													transform: rotate(-150deg); }

#Screen-Six > div > div > .trangles5 		{ position:absolute; left: 45em; top: -4rem;  }
#Screen-Six > div > div > .trangles5 img 	{ width: 28px; height: auto; -ms-transform: rotate(-150deg); -webkit-transform: rotate(-150deg); transform: rotate(-100deg); }

#Screen-Six > div > div > .trangles6 		{ position: absolute; left: 65rem; bottom: 0rem; }
#Screen-Six > div > div > .trangles6 img 	{ width: 28px; height: auto; -ms-transform: rotate(-150deg); -webkit-transform: rotate(-150deg); transform: rotate(-90deg); }

#Screen-Six > div > div > .trangles7 		{ position: absolute; right: 0rem; top: 15rem; }
#Screen-Six > div > div > .trangles7 img 	{ width: 28px; height: auto; -ms-transform: rotate(-150deg); -webkit-transform: rotate(-150deg); transform: rotate(-90deg); }











/*----------------------------SEVEN SCREEN----------------------*/

#Screen-Seven 		{ min-height: 600px; padding: 5em 0em 0em 0em; background-image: linear-gradient(to bottom right, #0047AB, #1277DD); margin-top: 0em; }
#Screen-Seven h1	{ font-family: 'Montserrat', sans-serif; font-weight: 200; font-size: 2.6em; color: #fff; line-height: 1.3em; margin-top: 0em;margin-bottom: 2em;}

#Screen-Seven input { border-radius: 5px; border: solid 1px #fff; text-align: left; }
#Screen-Seven > div > div > p 	{ font-size: 1.3em; color: #fff; margin-top: 5em; }


.carousel-inner p {
	font-family: 'Montserrat', sans-serif; color: #fff; font-size: .9em; font-weight: 200; line-height: 1.2em; }


/*---------------------------- FOOTER ----------------------*/

#footer { padding: 2em 0 0.6em 0; }
#footer .links a { color: #333; margin: 0 0.5em 0 0.5em; }
#footer i { font-size: 2em; color: #334ABE; margin-right: 0.3em !important; }

.Footer-Button { background-color: #334ABE; color: #fff; padding: 1em; margin-bottom: 0em !important; text-transform: uppercase; letter-spacing: 1px; }
.Footer-Button:hover { background-color: #000; color: #fff; text-decoration: none; }



/*---------------------------- Responsive Media Query ----------------------*/

.navbar-brand>img {  
    width: 100%;
}
.navbar {
    margin-bottom: 0px;
}
.navbar-toggler {
    padding: .5rem .75rem;
    font-size: 1.5rem;
    line-height: 1.5;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;position: absolute;
    top: 10px;
    right: 0px;
}
.navbar-light .navbar-toggler {
    color: rgba(255,255,255,.95);
    border-color: rgba(255,255,255,.91);
}
.fa-bars{font-size:28px;}
.navbar-toggler-icon {
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: 100% 100%;
}
.navbar-nav {
    margin: 15px 0px 0;
	width:100%;
}
.navbar-nav a{
    margin: 10px 0px;
} 
.navbar-brand {
    display: inline-block;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
	float:none;
}
.collapse.in {
	width:100%;	
} 	
 
.nav-link {
    display: inline-block;
    padding: .5rem 1rem;
}
#header.active .navbar-light .navbar-toggler {
    color: rgba(0,0,0,.95);
    border-color: rgba(0,0,0,.91);
}
#header.active .navbar-brand>img {
    width: 80%;
}
 #header.active .logo-black{display:block;}
  #header.active .logo-white{display:none;}
  #header .logo-black{display:none;}
  
  
@media screen and (max-width:768px) {
	
	
	
.logobg img {width: 50%;height: 50%; padding: 0% 0% 0% 0%; margin: 0 auto;}	
.logobg{background-position-x: center;}
#Screen-Two .Girl {margin-left: 5%; }
#Screen-Two .Boy {margin-right: 4%;}
#Screen-Two .one {width: 50%;position: relative;margin-top: 1em; padding:0 15px;}
#Screen-Two .two {width: 50%;float: left;margin-left: 0em;margin-top: 1em;position: relative; padding:0 15px;}
#Screen-Two .three {width: 50%;float: left;position: relative;top: 0px;right: 0px;text-align: right;margin-top: 1em; padding:0 15px;}
#Screen-Two .four {width: 50%;float: right;margin-top: 0em;margin-right: 0em;position: relative;right: 0px;text-align: right;margin-top: 1em; padding:0 15px;}

#Screen-Two .one:before {width: 100%;height: 108px;float: left;margin-right: 2em; background: url(../images/Second_screen/icon_01.gif) no-repeat top center;}
#Screen-Two h2 {font-size: 16px; color: #333;text-align: center;}
#Screen-Two p {font-size: 13px; color: #333;text-align: center;}
#Screen-Two h2 br{display:none;}
#Screen-Two .two:before{width: 100%;height: 108px;float: left;margin-right: 2em; background-position:top center;}
#Screen-Two .three:before{width: 100%;height: 108px;float: left;margin-right: 2em; background-position:top center;}
#Screen-Two .four:before{width: 100%;height: 108px;float: left;margin-right: 2em; background-position:top center;}
.row-eq-height {display: block;}
#Screen-Three .two{min-height:364px;}
#Screen-Three .five {min-height: 305px;}
#Screen-Three .seven{min-height: 357px;}
.slider {margin: 330px auto 0 !important;position: relative;}
.slide1, .slide2, .slide3, .slide4, .slide5 { position: relative;  width: 100%;  height: 100%;}
.Screen {
    position: absolute;
    top: 3em;
    right: 25rem;
    z-index: 0;
}
.Screen img {
    width: 60%;
    height: auto;
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
.Mobile img {
    width: 60%;
    height: auto;
}
#Screen-Four h1 br{display:none;}
#Screen-Four h1 {
    font-size: 22px;
    line-height: 2em;
}
#Screen-Four ul {
    font-weight: 500;
    font-size: 24px;
}
#Screen-Four > .container {
    position: relative !important;
    padding: 5em 1em 24em 1em;
    background-color: #004bfc;
	
}
#Screen-Seven > div > div > p {
    font-size: 1.3em;
    color: #fff;
    margin-top: 8em;
    text-align: center;
    width: 100%; 
}
.list-inline {
    padding-left: 0;
    list-style: none;
    margin: 0px 0 35px;
    display: block;
    text-align: center;
}

#header a {
    font-family: 'Roboto', sans-serif;
    font-size: 1.8em;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    margin-left: 0.5em;
    letter-spacing: 1px;
    z-index: 999 !important;
    width: 80%;
}
.navbar-brand>img {
    
    width: 100%;
}
.navbar {
    margin-bottom: 0px;
}
.navbar-toggler {
    padding: .5rem .75rem;
    font-size: 2.5rem;
    line-height: 1.5;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;position: relative;
    top: 10px;
    right: 0px;
}
.navbar-light .navbar-toggler {
    color: rgba(255,255,255,.95);
    border-color: rgba(255,255,255,.91);
}
.fa-bars{font-size:40px;}
.navbar-toggler-icon {
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: 100% 100%;
}
.navbar-nav {
    margin: 75px 0px 0;
	width:100%;
}
.navbar-nav a{
    margin: 10px 0px;
} 
.navbar-brand {
    display: inline-block;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
	float:none;
}
.collapse.in {
	width:100%;	
} 	
 
.nav-link {
    display: block;
    padding: .5rem 1rem;
}
#header.active .navbar-light .navbar-toggler {
    color: rgba(0,0,0,.95);
    border-color: rgba(0,0,0,.91);
}
#header.active .navbar-brand>img {
    width: 80%;
}
 #header.active .logo-black{display:block;}
  #header.active .logo-white{display:none;}
  #header .logo-black{display:none;}
}

@media screen and (max-width:767px) {
	
.btn-google 	{ width: 13em; height: auto; display: inline-block; padding-top: 1em;  }

#Screen-Two .Girl {
    margin-left: 5%;
    margin-top: 2em;
}
#Screen-Two .Girl img {
    width: 50%;
    height: auto;
    float: left;
}
#Screen-Two .Boy {
    margin-right: 0%;
}
#Screen-Two .Boy img {
    width: 50%;
    height: auto;
    float: right;
}
#Screen-Two .one {width: 100%;}
#Screen-Two .two {width: 100%;}
#Screen-Two .three {width: 100%;}
#Screen-Two .four {width: 100%;}

.Screen {
    position: absolute;
    top: 2em;
    right: 16rem;
    z-index: 0;
}
.Screen img {
    width: 90%;
    height: auto;
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
.Mobile {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 100;
}
.Mobile img {
    width: 80%;
    height: auto;
    float: right;
}
#Screen-Three .seven a h4 br{display:none;}
#Screen-Four h1 {
    font-size: 20px;
    line-height: 1.5em;
}
#Screen-Four ul {
    font-weight: 500;
    font-size: 20px;
}
.TextLogo{    font-size: 3.5rem;}

#header a {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1em;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    margin-left: 0.5em;
    letter-spacing: 1px;
    z-index: 999 !important;
    width: 80%;
}
.navbar-brand>img {
    display: block;
    width: 100%;
}
.navbar-toggler {
    padding: .25rem .75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;
	position: relative;
    top: -15px;
    right: 8px;
}
.navbar-light .navbar-toggler {
    color: rgba(255,255,255,.95);
    border-color: rgba(255,255,255,.91);
}
.fa-bars{font-size:20px;}
.navbar-toggler-icon {
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: 100% 100%;
}
.navbar-nav {
    margin: 17.5px 0px;
}
.navbar-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.navbar-brand {
    display: inline-block;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
	float:none;
}
.collapse.in {
	width:100%;	
} 	
 
.nav-link {
    display: block;
    padding: .5rem 1rem;
}


}