@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');




.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);
}




@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: 'Verdana','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;
}
.footer div  {
  margin: 0;
 align-items: center;
  align-content: center;
  justify-content: center;
  align-self: center;
  display: flex;
}
.get{
  font-size:50px;
}

@media screen and (max-width:898px){
  .block2 div {min-width:75%;}
  .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{
 
  display:flex;
}
#logo p{
  font-family:"Lato";
  font-size:35px;
  color:white;
}


.topcontainer {
height: 58px; 


width:100%;
  margin-top:0px;
  margin:rgba(0,255,0,0.3) ;
  
  display: flex;
  justify-content: space-between;
  background:rgba(0, 8, 0,0.3);  
 
 align-items: center;
  position:fixed;
  z-index: 100;
  

  
}






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


.dropdown-content {
    display: none;
    position: absolute;
    background-color:rgba(68,76,56,.9);
    min-width: 360px;
   width:500px;
    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;
   
    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 #purplep:hover, .topcontainer #blue:hover, .topcontainer #qt:hover ,
 .topcontainer  #green:hover,   #purplep a:hover, 
 .topcontainer  #blue a:hover,
  .topcontainer #qt a:hover, .topcontainer  #green a:hover {
  background: #FFD700; color:black;
}
.topcontainer #purplep {
   background-color: #4CBB17;
   


}

.topcontainer #qt {
  
   background-color:#818b35;
    

    
}
.topcontainer #green{
  
   background-color:#debc3b;
    

    
}

.topcontainer  #blue{
   background-color:#bf9b30; 
    
}
.topcontainer #logo {
  
  font-family:"Quantum";
  font-size: 30px;
  
  border-radius:5px;
  margin-right:30px;
  }


h2, h1 {
  color: #003333;
}

.about h2 {
  font-family:'Montserrat';
  font-size: 36px;
  text-transform:uppercase;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

-moz-osx-font-smoothing: grayscale;
  margin:0px;
  color:white;
  padding: 20px ;
  font-weight: light!important;

}

.about p{
    text-align:center;
  padding:0px 25px;
font-weight:300;
  font-size:20px;
    font-family:'Montserrat';
}
.The h2 h3 {
    font-family:'Verdana';
}
/*had to redo .the p quit working*/
.block2 p {
    

  padding:15px;
  line-height: 1.5;
  font-weight: 300;
-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;
font-family:'M PLUS 1p';
font-size:20px;

}
 
    

.the  p {
  padding:15px;
  line-height: 1.5;
  font-weight: 300;
-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;
font-family:'M PLUS 1p';
font-size:20px;

}
 

 #purplep a, #green a, #blue a,  #qt a{
  color:white;
  font-size:12px;
  margin: 25px 10px;  

font-family:'Montserrat';

font-weight:600;
    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;
    outline: 0;
  text-decoration: none;
  
   

}



.topcontainer span 
 {
 
  font-size:12px;
  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;
    padding: 15px 20px;
    text-decoration: none;  

}


.about {
    display:flex;
    justify-content: center;
    margin-left: 0px;
    margin-right:0px;
    margin-bottom: 0px;
    border-bottom:  20px ;  
    align-content:center;
    padding:25px 15px;
    background-color:rgb(65,87,57);
    width:cover;
    color:white;

}


.The {
    display: flex;


 padding-top:110px;
 padding-bottom:50px;
  flex-direction: column;

    
    background:linear-gradient(to bottom, #96b122 0, rgba(150,177,34,0.44) 100%); 
    
    background-repeat: no-repeat;
    background-image:cover ;
   
    background-size:1920px 100%;
    
margin:0px;

  
}


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


}

.block2 div {
box-shadow:  20px 10px 25px #003333;
  transition: box-shadow 0.6s linear;
    width:280px;
    height: 450px;
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: white;

    border-radius:30px;

}

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

 
   div #spy {
    padding:5px;
    display: flex;
    justify-content: center;
  height:100px;
background-color:white;
  /*border:solid blue 30px;*/


  border-radius:30px;
}
div img{
  height: 80px;
  background-color: transparent;
  /*border:solid #003333 3px;*/
}
.block2  h3 {
       font-family:'Verdana';
       font-weight: 600;
       font-size:25px;
       margin:0px 0px;
       text-transform:uppercase;
      border-top:solid #003333 2px;
      border-bottom: solid #003333 2px;
      /*border: #003333 solid;*/
       padding:5px;
       height: 53px;
}

.block1{
  
}

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

}

@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);
    }
  }
}