/* 
    Created on : Dec 23, 2016, 2:56:29 PM
    Author     : Melissa
*/

body {
  padding:0;
  margin:0;
  background-color: #00CCFF;
  text-align:center;  
 
}
p {
    font-size:2.5em;
    color: #0F2CC6;
    text-shadow:1px 1px #FF8500;
}
h1{
    color: #0F2CC6;
    text-shadow: 1px 1px #FF8500;
    font-size:3.5em;
    }
h2{
    font-size:2.5em;
    color: #0F2CC6;
    text-shadow:1px 1px #FF8500;
    }
iframe {
  border: none;
  margin: 0 auto;
  display: block;
}

.container {
  max-width: 50%;
  margin:0 auto;
}
  
.header, .footer {
  padding-right: 1rem;
  padding-left: 1rem;
}
.header-cont {
    width:100%;
    position:fixed;
    top:0px;        
    }
.nav-link {
    color: #CC9966;
    font-size: 2rem;
}
.footer {
  padding-top: 1.5rem;
  color: #ECCCAE;
    text-align:center;
}


.navbar {
    padding: 2px;
    text-decoration:none;
}
.nav {
  background-color: #03a9f4;
  text-decoration:none;
  padding: 10px;
  
}
.nav-link {
  position: relative;
  padding: 1rem;
  font-weight: 500;
  color: #092AF6;
  text-decoration:none;
}
.nav-link:hover,
.nav-link:focus {
  color: #fff;
  background-color: transparent;
}

.button img{
    width: 200px;
    height: 200px;
    margin: auto;
    float: left;
   padding:20px;
}
.button2 img{
   width: 200px;
    height: 200px;
    margin: auto;
    float: right;
    padding:20px;
}

.col-md-12 p {
    margin-top: 0px;
}
table img, table a img{
   width: 35vh;
   height:20vh; 
   margin:0 auto;
}  
#logo{
   width:55%;
   display: block;
   margin: 0 auto;
 
}
#wave img{
   width: 100%;
   display: block;
   margin: 0 auto;
}
   
@media only screen and (min-width:150px) and (max-width: 1200px)
{
 
    body {
    width:90%
  }

    .container {
      max-width: 100%;
    }

    .header, .footer {
      padding-right: 1rem;
      padding-left: 1rem;
      width:100%;
    }
    .header-cont {
       padding:0px;      
        }

    .footer {
     width:100%;
    }

    .navbar {
       width:100%;
       text-align:center;
    }
    .nav {
      display: block;
      padding: 10px;
    }
    .col-md-12 p {
        width:100%;
    }
    table img{
      width: 100%;
       display: block;
    }  
    logo{
       width:100%;
       display: block;
       margin: 0 auto;
    }
    #wave{
       width: 100%;
       display: block;
    }
    iframe{
        width:100%;
    }
}