.p1-head-sc {
  height: 700px;
  background-color: #f0efff;
  margin-top: -60px;
}
.bg-body{
  background: none;
  -webkit-background-size: 1440px 770px;
     -moz-background-size: 1440px 770px;
       -o-background-size: 1440px 770px;
          background-size: 1440px 770px;
  background-position: 50% 0%;  
  background-repeat: no-repeat;
  width: 1440px; height: 100%;
  position: absolute;
  z-index: -1;
  margin-top: -20px;
  margin-left: 0px;
}
.p1-bg-lay2 {
  background: #efefff;
  -webkit-background-size: 1440px 850px;
     -moz-background-size: 1440px 850px;
       -o-background-size: 1440px 850px;
          background-size: 1440px 850px;
  background-position: 50% 0%;  
  background-repeat: no-repeat;
  width: 100%; height: 850px;
  position: absolute;
  z-index: -1;
  margin-top: -20px;
  margin-left: 0px;
  -opacity: 0.8;
}
.p1-ss-bg { 
  width: auto;
  height: auto; /*120px*/
  margin-top: 40px; /*210px*/
  overflow-x: hidden;
  overflow-y: hidden;
  -background-color: #013a6b;
}
.p1-ss {
  width: 300px;
  height: 500px;
  position: relative;
  left: 50%;
  margin-left: -150px !important;  /* 50% of your logo width */
  display: block;
  margin-top: 50px;
}
.p1-hr {
  height: 2px;
  width: 100%;
  margin-top: 0px;
}
.p1-ss-desc{
  margin-top: 0px;  
}
.p1-ss-desc-hd,
.p1-ss-desc-p1,
.p1-ss-desc-p1-rez,
.p1-ss-desc-hd-rez {
  position: relative;
  text-align: center;
  -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
}
.p1-ss-desc-hd,
.p1-ss-desc-hd-rez {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 400;
  font-size: 0px;
  letter-spacing: 0.2vw;
  color: #444;
}
.p1-ss-desc-p1,
.p1-ss-desc-p1-rez {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  letter-spacing: 0.10vw;
  margin-top: 0px;
  color: #666;
}
.p1-ss-desc-hd-rez,
.p1-ss-desc-p1-rez {
  padding-right: 20px;
  padding-left: 20px; 
}
.p1-ss-desc-hd{
  font-size: 0px;
}
.p1-ss-desc-hd-rez {
  font-size: 26px;
}
.p1-ss-desc-p1 {
  font-size: 0px;
}
.p1-ss-desc-p1-rez {
  font-size: 18px;
}
.p2-ss-bg { 
  width: auto;
  margin-top: -28px;
  height: auto; /*120px*/
  overflow-x: hidden;
  background-image: -webkit-linear-gradient(270deg, #013A6B 30%, #004E95 70%);
}
.p2-ss-desc {
  margin-top: 50px;
}
.p2-ss-desc-hd,
.p2-ss-desc-p1 {
  color: #efefef;
  font-family: 'Raleway','Calibri';
  position: relative;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-align: center;
}
.p2-ss-desc-hd {
  font-weight: 600;
  font-size: 32px;
  letter-spacing: 0.4vw;
}
.p2-ss-desc-p1 {
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.03vw;
}
.p2-ss-desc-annc {
  margin-top: 0px;
  margin-left: 0px;
  height: 450px;
  width: 330px;
  left: 50%;
  margin-left: -165px !important;  /* 50% of your logo width */
  margin-top: 50px;
  margin-bottom: 70px;
  position: relative;
  opacity: 0.8;
}
.p3-ss-bg { 
  width: auto;
  height: auto;
  background-color: #f2f2f2;
  overflow-x: hidden;
}
.p3-ss-desc {
  margin-top: 70px;
  text-align: center;
}
.p3-ss-desc-hd,
.p3-ss-desc-p1 {
  color: #505050;
  position: relative;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.p3-ss-desc-hd {
  font-family: 'Lato','sans-serif';
  font-weight: 300;
  font-size: 42px;
  letter-spacing: 0.05vw;
}
.p3-ss-desc-p1 {
  font-family: 'Roboto','sans-serif';
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 0.03vw;
}
.p3-ss-desc-img {
  height: 580px;
  width: 420px;
  position: absolute;
  left: 50%;
  margin-top: 20px;
  margin-left: -210px !important;  /* 50% of your logo width */
  display: block; 
}
.mask {
  position: relative;
  margin-top: 74px;
  width: 269px;
  height: 456px;
  overflow: hidden;
  left: 50%;
  margin-left: -135px !important;  /* 50% of your logo width */
  display: inline-block;
}
.canvas {
  position: relative;
  width: 807px;
  height: 456px;
  -margin-top: 84px;
}
.page {
  width: 269px;
  height: 456px;
  float:left;
  display: inline;
}
.p3-ss-desc-r2c2 {
  padding: 60px 60px 20px;
}
.P3-ss-desc-r2p1,
.P3-ss-desc-r2p2 {
  color: #505050;
  position: relative;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.P3-ss-desc-r2p1 {
  font-family: 'Droid Sans','sans-serif';
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.03vw;
  margin-top: 45px;
}
.P3-ss-desc-r2p1 span {
  color: #0277bd;
}
.P3-ss-desc-r2p2 {
  font-family: 'Pontano Sans','sans-serif';
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.03vw;
  margin-bottom: 40px;
}
/*.p3a-ss-bg-img {
  background: url("../images/math_eq1.jpg") no-repeat;
  -webkit-background-size: 1440px 770px;
     -moz-background-size: 1440px 770px;
       -o-background-size: 1440px 770px;
          background-size: 1440px 770px;
  background-position: 50% 0%;  
  background-repeat: no-repeat;
  width: 100%; height: 100%;
  position: absolute;
  z-index: -1;
  margin-top: -20px;
  margin-left: 0px;
 }*/
.p3a-ss-bg-img {
  background-color: -webkit-linear-gradient(90deg,#053b6d 0%,#1c71bf 100%);
  background-color: linear-gradient(90deg,#053b6d 0%,#1c71bf 100%);
   -webkit-background-size: 1440px 770px;
      -moz-background-size: 1440px 770px;
        -o-background-size: 1440px 770px;
           background-size: 1440px 770px;
  background-position: 50% 0%;  
  width: 100%; height: 100%;  
  -position: absolute;
  z-index: -1;
}
.p3a-ss-bg { 
  width: auto;
  height: auto;
  -background-color: #004e95;
  background-color: rgba(0, 78, 149,0.6);
  padding: 60px 0px; 
  overflow-x: hidden;
}
.p3a-ss-desc-hd,
.p3a-ss-desc-p1 {
  color: #191919;
  position: relative;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-align: center;
}
.p3a-ss-desc-hd {
  font-family: 'Lato','sans-serif';
  font-weight: 300;
  font-size: 42px;
  letter-spacing: 0.05vw;
}
.p3a-ss-desc-p1 {
  font-family: 'Roboto','sans-serif';
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 0.03vw;
}
.p4-section-bg {
  position: relative;
  width: auto;
  height: auto;
  background-color: #ffffff;
  box-shadow: none;
}
.p4-section-c1 {
  margin-top: 50px;
}
.p4-sect-hd,
.p4-sect-hd-tag {
  position: relative;
  text-align: center;
}
.p4-sect-hd {
  color: #404040;
  font-family: 'Lato','sans-serif';
  font-weight: 300;
  font-size: 36px;
  letter-spacing: 0.05vw;
}
.p4-sect-hd-tag {
  color: #606060;
  font-family: 'Open Sans','sans-serif';
  font-weight: 300;
  font-size: 18px;
  letter-spacing: 0.02vw;
}
.p4-dollar-img {
  height: 100px;
  width: 100px;
  position: relative;
  left: 50%;
  margin-left: -50px !important;  /* 50% of your logo width */
  display: block;
}
.p4-sect-r2{
  margin-top: 0px;
  padding-right: 30px;
  padding-left: 30px;
}
.p4-sect-r2c1 {
  margin-top: 50px;
}
.p4-support-img {
  height: 100px;
  width: 100px;
  position: relative;
  left: 50%;
  margin-left: -50px !important;  /* 50% of your logo width */
  display: block;
}
.p4-dollar-th1,
.p4-support-th1 {
  font-family: 'Roboto', 'sans-serif';
  font-weight: 300;
  font-size: 24px;
  -letter-spacing: 0.01vw;
  text-align: center;
  color: #497bbe;
  margin-top: 10px;
}
.p4-support-tc1 {
  margin-top: 20px;
  padding-right: 30px;
  padding-left: 50px;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 18px;
  letter-spacing: 0.03vw;
  color: #000;
}
.p5-section-bg {
  width: auto;
  height: auto;
  background-image: -webkit-linear-gradient(90deg,#053b6d 0%,#1c71bf 100%);
  box-shadow: none;
  margin-top: 50px;
}
.p5-section-r1 {
  margin-top: 50px;
}
.p5-section-r1p1 {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 72px; 
  font-weight: 400;
  color: #fff;
  text-align: center;
}
.p5-section-r1p1 span {
  font-size: 84px;
  font-weight: 600;
}
.p5-section-sn-logo {
  width: 550px;
  height: 370px;
  position: relative;
  left: 50%;
  margin-left: -275px !important;  /* 50% of your logo width */
  display: block;
}
.p5-logo-img {
  height: 119px;
  width: 513px;
  position: relative;
  left: 50%;
  margin-left: -256px !important;  /* 50% of your logo width */
  display: block;
}
.p5-section-r2 {
  margin-top: 25px;
  margin-bottom: 100px;
}
.p5-gplay-img {
  height: 80px;
  width: 200px;
  position: relative;
  left: 50%;
  margin-left: -100px !important;  /* 50% of your logo width */
}
@media (min-width: 768px) {
  .p1-ss {
    width: 400px;
    height: 650px;
    position: relative;
    left: 50%;
    margin-left: -200px !important;  /* 50% of your logo width */
    margin-top: 50px;
    display: block;  
  }
  .p1-ss-desc-hd-rez {
    font-size: 36px;
  }
  .p1-ss-desc-p1-rez {
    font-size: 21px;
  }
}  
@media (min-width: 992px) {
  .bg-body{
    background: url("../images/sn_bg1.jpg") no-repeat;
    -webkit-background-size: 1440px 770px;
       -moz-background-size: 1440px 770px;
         -o-background-size: 1440px 770px;
            background-size: 1440px 770px;
    background-position: 50% 0%;  
    background-repeat: no-repeat;
    width: 1440px; height: 100%;
    position: absolute;
    z-index: -1;
    margin-top: -20px;
    margin-left: 0px;
    -opacity: 0.7;
    -filter: blur(5px);
    -top: -5px;
    -left: -5px;
  }
  .p1-bg-lay2 {
    background: #efefff;
    -webkit-background-size: 1440px 770px;
       -moz-background-size: 1440px 770px;
         -o-background-size: 1440px 770px;
            background-size: 1440px 770px;
    background-position: 50% 0%;  
    background-repeat: no-repeat;
    width: 100%; height: 100%;
    position: absolute;
    z-index: -1;
    margin-top: -20px;
    margin-left: 0px;
    opacity: 0.8;
  }
  .p1-ss-bg {	
	  width: auto;
    height: auto; /*120px*/
    margin-top: -60px; /*210px*/
    overflow-x: hidden;
    overflow-y: hidden;
    color: #013a6b;
  }
  .p1-ss {
   	width: 350px;
  	height: 600px;
  	position: relative;
  	left: 50%;
  	margin-left: -170px !important;  /* 50% of your logo width */
    margin-top: 150px;
  	display: block;
  }
  .p1-ss-desc{
	  margin-top: 300px;	
  }
  .p1-ss-desc-hd,
  .p1-ss-desc-p1 {
    text-align: left;
  	position: relative;
    -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     margin-left: 15px;
  }
  .p1-ss-desc-hd {
  	font-size: 46px;
  }
  .p1-ss-desc-p1 {
  	font-size: 20px;
    margin-top: 20px;
  }
  .p1-ss-desc-hd-rez {
    font-size: 0px;
  }
  .p1-ss-desc-p1-rez {
    font-size: 0px;
  }
  .p1-img {
    z-index: -1;
  }
  .p2-ss-bg {	
    width: auto;
    height: 35em;
    -background-image: -webkit-linear-gradient(30deg,#013A6B 60%,#004E95 50%);
    background-image: -webkit-linear-gradient(160deg,#013A6B 58%,#004E95 50%);
    position: relative;
    overflow-y: hidden;
  }
  .p2-ss-desc {
	  margin-top: 200px;
  }
  .p2-ss-desc-hd,
  .p2-ss-desc-p1 {
    text-align: left;
  }
  .p2-ss-desc-hd {
  	font-weight: 600;
  	font-size: 36px;
  	letter-spacing: 0.4vw;
  }
  .p2-ss-desc-p1 {
  	font-weight: 400;
  	font-size: 24px;
  	letter-spacing: 0.03vw;
  }
  .p2-ss-desc-annc {
    margin-top: 0px;
    margin-left: -20px;
    width: auto;
    height: auto;
    position: absolute;
  }   
  .p3-ss-bg {	
    height: 60em;
  }
  .p3-ss-desc-hd {
  	font-size: 52px;
  }
  .p3-ss-desc-p1 {
  	font-size: 24px;
  }
  .p3-ss-desc-img {
    height: 580px;
    width: 420px;
    position: absolute;
    left: 50%;
    margin-top: 60px;
    margin-left: -170px !important;  /* 50% of your logo width */
    display: block;	
  }
  .p3-ss-desc-r2c2 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .P3-ss-desc-r2p1,
  .P3-ss-desc-r2p2 {
    color: #505050;
    position: relative;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
  }
  .P3-ss-desc-r2p1 {
    font-family: 'Droid Sans','sans-serif';
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 0.03vw;
    margin-top: 45px;
  }
  .P3-ss-desc-r2p2 {
    font-family: 'Pontano Sans','sans-serif';
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0.03vw;
    margin-bottom: 40px;
  }
  .mask {
    position: relative;
    margin-top: 114px;
    width: 269px;
    height: 456px;
    overflow: hidden;
    left: 50%;
    margin-left: -95px !important;  /* 50% of your logo width */
    display: block;
  }
  .canvas {
    position: relative;
    width: 807px;
    height: 456px;
  }
  .page {
    width: 269px;
    height: 456px;
    float:left;
    display: inline;
  }
  .p4-section-bg {
    position: relative;
    width: auto;
    height: 50em;
    background-color: #fffff;
    -background: -webkit-linear-gradient(to bottom,#0051b2 0%,#003a7f 100%);
    -background: linear-gradient(180deg,#f2f2f2 0%,#fff 100%);
    box-shadow: none;
  }
  .p4-section-c1 {
    margin-top: 100px;
  }
  .p4-sect-hd,
  .p4-sect-hd-tag {
    position: relative;
    text-align: center;
    -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
  }
  .p4-sect-hd {
    color: #404040;
    font-family: 'Lato','sans-serif';
    font-weight: 300;
    font-size: 42px;
    letter-spacing: 0.05vw;
  }
  .p4-sect-hd-tag {
    color: #404040;
    font-family: 'Open Sans','sans-serif';
    font-weight: 300;
    font-size: 22px;
    letter-spacing: 0.02vw;
    -text-transform: uppercase;
  }
  .p4-dollar-img {
    height: 100px;
    width: 100px;
    position: relative;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
  }
  .p4-sect-r2{
    margin-top: 75px;
    padding-right: 100px;
    padding-left: 100px;
  }
  .p4-support-img {
    height: 100px;
    width: 100px;
    position: relative;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
  }
  .p4-dollar-th1,
  .p4-support-th1 {
    font-family: 'Roboto', 'sans-serif';
    font-weight: 300;
    font-size: 26px;
    -letter-spacing: 0.01vw;
    text-align: center;
    color: #497bbe;
    margin-top: 40px;
  }
  .p4-support-tc1 {
    margin-top: 40px;
    padding-right: 30px;
    padding-left: 50px;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0.03vw;
    color: #555;
  }
  .p5-section-bg {
    width: auto;
    height: 41em;
    -background-color: #004e95;
    background-image: -webkit-linear-gradient(90deg,#053b6d 0%,#1c71bf 100%);
    -background-image: -webkit-linear-gradient(90deg,#004e95 0%,#1c1c1c 100%);
    -background-image: -webkit-linear-gradient(90deg,#004e95 0%,#39a3f5 100%);
    -background-image: -webkit-linear-gradient(90deg,#004e95 0%,#fff 100%);
    box-shadow: none;
  }
  .p5-section-r1 {
    margin-top: 20px;
  }
  .p5-section-r1p1 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 72px; 
    font-weight: 400;
    color: #fff;
    text-align: center;
  }
  .p5-section-sn-logo {
    width: 700px;
    height: 500px;
    position: relative;
    left: 50%;
    margin-left: -350px !important;  /* 50% of your logo width */
    display: block;
  }
  .p5-section-r1p1 span {
    font-size: 84px;
    font-weight: 600;
  }
  .p5-logo-img {
    height: 119px;
    width: 513px;
    position: relative;
    left: 50%;
    margin-left: -256px !important;  /* 50% of your logo width */
    display: block;
  }
  .p5-section-r2 {
    margin-top: 0px;
    margin-bottom: 50px;
  }
  .p5-gplay-img {
    height: 80px;
    width: 200px;
    position: relative;
    left: 50%;
    margin-left: -100px !important;  /* 50% of your logo width */
  }
}