@import url('https://fonts.googleapis.com/css?family=Lato:300,400');
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p');

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


#spy img{
    width:95px;
    height:95px;
}
.sticker{
    width:95px;
}
.sticker:hover {
  /* Toggle our animation play state to running when we are hovering over our sticker */
  animation-play-state: running;
}
.sticker {
 
animation: spin 2s linear infinite;
  /*Set our animation play state to paused initially */
  animation-play-state: paused; 
}
@keyframes spin {
  100% {transform: rotate(1turn); }
}

@font-face {
  font-family: 'Font';
  src: url('Sansation_Light.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('Sansation_Light.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
   font-family: Font;
   src: url(sansation_light.ttf);
}
@font-face {
   font-family: MontserratB;
   src: url(Montserrat-Bold.ttf);
}

#logo p img {
    vertical-align: middle;
    max-width: 180px;
}

@media only screen and (max-width:680px) {
 #logo p img {
    vertical-align: middle;
    max-width: 150px;
}
}
@media only screen  and (min-width:955px) {
  .dropdown{display:none;}
 }
@media only screen  and (max-width:955px) {
#roundbtn {display:none;}}
  #square{margin-top:300px;}
}
a {
  text-decoration: none;}
  @font-face {
   font-family: Quantum;
   src: url(Quantum.otf);
}

h1 {
    font-family: 'Monserrat','Font';
}

div img {
  padding:5px;
}
html, body{margin:0px 0px; }


.hvr-icon-float-away {

    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}


@media only screen and (max-width:620px){
  footer div {
    text-align: center;
    display:flex;
    justify-content:center;
   flex-wrap:wrap;
   line-height: 2;
   
  }

}
@media only screen and (max-width:521px){
   .get {
    
   line-height: 1;
   
  }

}
 
.main #purple a:hover{
  color:black; background-color:#FFFFFF;
}
.footer{
display:flex;
justify-content: center;
flex-direction: column;
align-items: center;
align-content: center;


background-color:rgba(0,0,0,.8);
color:white;
padding:35px 25px 80px 25px;
font-family:'Montserrat';
font-size: 22px;
text-align:center;

}

.footer a p, .footer #span {
  font-family:'Montserrat';
font-size: 22px;
color:white;
outline:  none;
text-decoration: none;
}
.footer a p:hover, .footer #span:hover {
  color:grey;
}
.footer a {
  text-decoration: none;
  color:white;
}
.footer div  {
  margin: 0;
 align-items: center;
  align-content: center;
  justify-content: center;
  align-self: center;
  display: flex;
}
footer button {
    
    font-family: 'Montserrat';
    font-size: 22px;
    color: white;
    border-radius: 50px;
    outline-style: none;
    border: 2px solid white;
    background: transparent;
    text-transform: uppercase;
    margin: 5px;
    padding: 8px;
    background-color:transparent;
}
.footer button:hover{
  color:black; background:white;
  font-family:'MontserratB';
  outline-style:none;
}
.get{
  font-size:50px;
}

@media screen and (max-width:898px){
    .block2 div {min-width:88%;
   padding:0 0 10px 0!important;
     
  }/*fix to 80 %*/
  .the{width:100%;}
}
.titanic path {
      fill:  #249795;
      stroke: #bac5c3;
    
    }
.titanic {
      width: 50px;
      height: 50px;
      display: inline-block;
      /*Decoration for the presentation only, remove it when using on your own*/
      padding: 20px;
      color: blue;

      fill:#82349E;
      padding: 0px;
    }


.menu{
  width:;
  display:flex;
}
#logo p{
  font-family:"Quantum";
  font-size:35px;
  color:white;
}


.topcontainer {
height: 68px; 


width:100%;
  margin-top:0px;
  margin:;
  background-color:#4c4c4c;/*#91ba20;  #91c02c;*/
  display: flex;
  justify-content: space-between;
  /*background:rgba(180,243, 160,0.3); rgba(242, 222, 48, 0.2);*/
 
 align-items: center;
  position:fixed;
  z-index: 100;
  

  
}






.dropbtn {
    background-color:rgba(0, 0, 0,0.0);
    color: white;rgb(255,255,255,);
    padding: 15px;
    
    border-radius: 25px;
    border: none;
     font-family:Montserrat;
     font-weight: 800;
}


.dropdown-content {
    display: none;
    position: absolute;
     background-color:#688b08;
    background-color:rgba(111,156,49,.9) ;
    /*-color:#688b08;*/
    width: 100%;
   height:620px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
    z-index: 1;
    border-radius:25px;
    margin:0px 0px;
    outline-style: none;
}


@import url('https://fonts.googleapis.com/css?family=Lato:300');
.dropdown-content a {
    color: white;
    padding: 26px 25px;
    text-decoration: none;
    display: block;
    font-size:25px;
    font-weight: 800;
    outline:none;
   /* border-radius:35px;*/
    font-family:'Montserrat';
}

.dropdown-content a:hover {background-color:#FFF7B6;  color:black; border-radius:35px;  outline:none; }  

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #688b08;outline:none;}

.topcontainer{
    
}

#roundbtn ul span{
    
}
.topcontainer #purplep {
  /* background-color: #4CBB17;*/
   


}

.topcontainer #qt {
  
  /*background-color:#818b35;#debc3b;#37bf7b;*/
    

    
}
.topcontainer #green{
  
  /* background-color:#debc3b;#818b35;#debc3b;#37bf7b;*/
    

    
}

.topcontainer  #blue{
  /* background-color:#bf9b30; black;#374ebf;*/
    
}
.topcontainer #logo {
 
  }


h2, h1 {
  color: #81a623;
}
.about h2 {
  font-family:'Montserrat';'Font';
  font-size: 36px;
  text-transform:uppercase;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smooth:;
-moz-osx-font-smoothing: grayscale;
  margin:0px;
  color:white;
  padding: 20px ;
  font-weight: light!important;

}
/*htmlindexstyle*/
.about p{
    line-height:3;
    text-align:center;
  padding:0px 25px;
font-weight:300;
  font-size:20px;
    font-family:Nunito-sans;
    
}
/*.The h2 h3 {
    font-family:'Verdana';
}*/
p #mt {
    font-family:Montserrat;
}

.the p{
    padding:15px;
    line-height: 1.5;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size:20px;
    font-family: 'Montserrat';
}
 
 #mt{
     font-family:Montserrat;
 }

 #purplep a, #green a, #blue a,  #qt a{
  color:white;
  
 


    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    outline: 0;
  
    text-transform: uppercase;
    color: #ffffff;-moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    outline: 0;
  
  
 
  text-decoration: none;
  
   

}



.topcontainer span 
 {
 
  
  margin: 25px 10px;

font-family:/*'Montserrat',*/ sans-serif;
 
  border-radius: 35px;
  letter-spacing: 1px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    outline: 0;
  
    text-transform: uppercase;
    color: #ffffff;-moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    outline: 0;

  padding: 15px 20px;
 
  text-decoration: none;  

}
.about {
    display:flex;
    justify-content: center;
/*margin-top:58px;*/
margin-left: 0px;
margin-right:0px;
margin-bottom: 0px;
border-bottom:  20px ;
align-content:center;
padding:25px 15px;


background-image:url('gb.jpg');
/*background-color:#8ba62a;/*#81A623;;
/*background-color:#7ca426;*/
width:cover;
color:white;

}


.The {
    background: cover;
    background-size: cover;
    display: flex;
    padding-top:110px;/*when moving about section had to ad 58px to top padding*/
    padding-bottom:50px;
    flex-direction: column;
    /*border: green solid 5px;*/
    /* background:url("stockgreenvid.webm"); *//*("fence60.jpg");*/
    /*background-color:peachpuff;
  /* background-color:rgba(0,100,0,.3);*/
    /*background-image: url("swirl.jpg");*/
    background-repeat: no-repeat;
    background-image: linear-gradient(to right bottom, #8ba62a, #81A623);   /* #00bbac*/
    background-image: linear-gradient(to right bottom, #ffffff,#fffffee0), url(tech25.jpg);
    /* url("peopledesign.jpg");rgba(111, 80, 130)#95c51a;*/
    margin:0px;
    background-image: cover;
    /* background-size: 100%; */
    background-image: cover;
}


.block2 {
    display:flex;
    flex-wrap:wrap;
    justify-content: center;


}

.block2 div {transition: box-shadow 0.6s linear;width: 25%;height: 390px;padding: 5px;margin-top: 20px;margin-bottom:20px;/* margin-left: 100px; *//* margin-right:100px; */justify-content:center;/* border: #003333 solid 2px;*/align-self: center;text-align: center;padding: 0px;background-color: #ffffff29;background-color:rgba(255,255,255,.08);border-radius:30px;}

.block2 div:hover { box-shadow:  0px 0px 55px #003333; }

 
   div #spy {
    padding:5px;
    display: flex;
    justify-content: center;
    /* background-color: #ffffff3d; */
    /*border:solid blue 30px;*/
    border-radius:30px;
}
div img{
  
  background-color: transparent;
  /*border:solid #003333 3px;*/
}
.block2  h3 {
       color: #81a623;
       font-family:'Montserrat';
       font-weight: 600;
       font-size:25px;
       margin:0px 0px;
       text-transform:uppercase;
       /* border-top:solid #003333 2px; */
       border-bottom: solid #00333300 2px;
       /*border: #003333 solid;*/
       padding:5px;
       height: 53px;
}

.block1{
  width:;
}

 .The h1{
     color: #8a623;
     /* box-shadow: 25px 20px 35px; */
     border-radius:30px;
     display:flex;
     justify-content: center;
     /*  border:solid #003333 2px;*/
     margin-top:0;
     margin-bottom: 55px;
     padding:15px;
     font-size: 36px;
     font-weight:600;
     /* background:white; */
     text-transform:uppercase;
     width:300px;
     align-items:center;
     align-content:center;
     text-align:center;
     font-family:Montserrat;
}

@media only screen and (max-width:338px) {
    .The h1 {
        width:250px;
    }
}
.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: transform;
}

.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
    transform: scale(1.1);
}
/* Float */
.hvr-float {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-float:hover, .hvr-float:focus, .hvr-float:active {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}/* Float */
.hvr-float {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-float:hover, .hvr-float:focus, .hvr-float:active {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}

.hvr-skew-forward {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
.hvr-skew-forward:hover, .hvr-skew-forward:focus, .hvr-skew-forward:active {
  -webkit-transform: skew(-10deg);
  transform: skew(-10deg);
} 


@-webkit-keyframes hvr-pop {
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}
@keyframes hvr-pop {
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}
.hvr-pop {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
  -webkit-animation-name: hvr-pop;
  animation-name: hvr-pop;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Pulse Grow */
@-webkit-keyframes hvr-pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@keyframes hvr-pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
.hvr-pulse-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-pulse-grow:hover, .hvr-pulse-grow:focus, .hvr-pulse-grow:active {
  -webkit-animation-name: hvr-pulse-grow;
  animation-name: hvr-pulse-grow;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}



/* Pulse Shrink */
@-webkit-keyframes hvr-pulse-shrink {
  to {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes hvr-pulse-shrink {
  to {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

.hvr-grow-rotate {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow-rotate:hover, .hvr-grow-rotate:focus, .hvr-grow-rotate:active {
  -webkit-transform: scale(1.1) rotate(4deg);
  transform: scale(1.1) rotate(4deg);
}

.hvr-pop {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
  -webkit-animation-name: hvr-pop;
  animation-name: hvr-pop;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

.spin{ 
   
    margin: 3px 20px; 
    -webkit-transition: 0.6s ease-out;
    -moz-transition:  0.6s ease-out;
    transition:  0.6s ease-out;
  }
  
  &:hover {
    p.title{ color: #0B486B; }
    
    .spin{
      -webkit-transform: rotateZ(720deg);
      -moz-transform: rotateZ(720deg);
      transform: rotateZ(720deg);
    }
  }
}