h1 {

font-family: 'Open Sans', sans-serif;
font-size: 24px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;

}

h3 {

font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 15.4px;

}

p {

font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;

}

blockquote {

font-family: 'Open Sans', sans-serif;
font-size: 21px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 30px;

}

pre {

font-family: 'Open Sans', sans-serif;
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 18.5714px;

}

a:link {

text-decoration: none;

}

a:visited {

text-decoration: none;

}

a:hover {

text-decoration: none;

}

a:active {

text-decoration: none;

}

html {

margin: 0px;
height: 100%;
width: 100%;

}

body {

font-family: 'Open Sans', sans-serif;
color: #414141;
min-height: 100%;
height: 100%;
margin: 0;

}

banner_container {

position: relative;
z-index: 3;
background-image: url("wbb.png");
background-repeat: no-repeat;
width: 100%;
height: 293px;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
overflow-x: hidden;
-webkit-background-size: cover;

}

title_container {

width: 400px;
margin: 0 auto;
margin-top: 70px;

}

.title_h1 {

line-height: 1.2em;
text-align: center;
font-family: lulo-clean-w01-one-bold, sans-serif;
#font-family: 'Roboto Slab', serif;
color: #414141;
font-size: 46px;
font-weight: bold;
letter-spacing: 4px;
text-transform: uppercase;

}

menu_container {

margin: 0 auto;
display: inline-block;
margin-top: 10px;

}

.menu_text {

font-size: 20px;
font-weight: bold;
letter-spacing: 2px;
color: #414141;
margin-left: 5px;
margin-right: 5px;

}

.home_content {

max-width: 1400px;
margin: 0 auto;

}

.masonry {

padding: 0;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
column-gap: 30px;
font-size: .85em;
margin: 40px;

}

.masonry_one {

padding: 0;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
column-gap: 30px;
font-size: .85em;
margin: 40px;
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;

}

.item {

display: inline-block;
background: #fff;
padding: 2px;
margin: 0 0 30px;
width: 100%;
/* animation: item_animation 10s ease-in-out infinite; */

}

@keyframes item_animation {

25% {
    transform: rotate(0.5deg);
}
50% {
    transform: rotate(-0.5deg);
}
75% {
    transform: rotate(0.5deg);
}

}

@media only screen and (min-width: 400px) {

.masonry {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
}
#related_posts_masonry {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
}

}

@media only screen and (min-width: 700px) {

.masonry {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
}
#related_posts_masonry {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
}

}

@media only screen and (min-width: 900px) {

.masonry {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}
#related_posts_masonry {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

}

@media only screen and (min-width: 1100px) {

.masonry {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}
#related_posts_masonry {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

}

@media only screen and (min-width: 1280px) {

.wrapper {
    width: 1260px;
}

}

.excerpt_container {

border: 1px solid #fff;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
overflow: hidden;

}

.excerpt_container img {

width: 100%;

}

.footer {

width: 100%;
text-align: center;
font-size: 14px;
margin-top: 10px;
padding-top: 20px;
padding-bottom: 20px;
background-color: #49545e;
color: white;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
/** add this **/
-moz-box-sizing: border-box;
/** add this **/
-webkit-box-sizing: border-box;
/** add this **/
-ms-box-sizing: border-box;
/** add this **/

}

.footer_email {

margin-top: 20px;
margin-bottom: 5px;
font-size: 14px;
letter-spacing: 1px;

}

.footer_copyright {

margin-top: 15px;
margin-bottom: 5px;
font-size: 12px;
letter-spacing: 1px;
color: #a4aaaf;

}

.bottom_tabs {

width: 100%;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
position: fixed;
;
bottom: 0;
background-color: white;
display: none;
border-top: 1px solid #ededed;

}

@media only screen and (max-width: 900px) {

/*.bottom_tabs {
    display: block;
}
body {
    margin-bottom: 89px;
}
.footer {
    display: none;
}*/
#social_container_small {
    display: none;
}

}

.bottom_tab_wrapper {

width: 24%;
display: inline-block;
text-align: center;
position: relative;

}

.bottom_tab_img {

width: 25px;
height: 25px;
display: inline-block;
object-fit: contain;
background-image: url("grey_circle.png");
background-size: contain;
background-repeat: no-repeat;
z-index: 1000;

}

.bottom_tab_wrapper .menu_header_text {

margin-top: 10px;
color: grey;
text-align: center;
display: block;
font-size: 12px;

}

.bottom_tab_wrapper .menu_header_text_current {

margin-top: 10px;
color: black;
text-align: center;
display: block;
font-size: 12px;

}

.footer_subscribe {

margin-top: 5px;
display: block;
height: 35px;
width: 100%;

}

.subscribe_container {

width: 100%;
max-width: 500px;
margin: 0 auto;
height: 50px;
display: block;

}

.subscribe_email {

width: 56%;
padding-left: 3px;
height: 35px;
position: relative;
left: 0;
font-size: 16px;
border: 1px solid #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
display: inline-block;
float: left;
color: #41b0f7;
top: 50%;
transform: translateY(-50%);
text-align: center;
box-sizing: border-box;
/** add this **/
-moz-box-sizing: border-box;
/** add this **/
-webkit-box-sizing: border-box;
/** add this **/
-ms-box-sizing: border-box;
/** add this **/

}

.subscribe_button {

width: 40%;
height: 35px;
text-align: center;
font-size: 16px;
color: white;
text-transform: uppercase;
border: 1px solid #41b0f7;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
display: inline-block;
text-align: center;
position: relative;
padding: 0;
float: right;
background-color: #41b0f7;
letter-spacing: 1px;
top: 50%;
transform: translateY(-50%);
display: table;
box-sizing: border-box;
/** add this **/
-moz-box-sizing: border-box;
/** add this **/
-webkit-box-sizing: border-box;
/** add this **/
-ms-box-sizing: border-box;
/** add this **/

}

.post_info {

line-height: 30px;
margin-top: 5px;
margin-bottom: 5px;
padding: 0;

}

.home_post_title {

font-size: 20px;
text-transform: capitalize;
margin: 0;
font-weight: bold;

}

.home_post_date {

float: right;
margin: 0;

}

@media only screen and (min-width: 1280px) {

.wrapper {
    width: 1260px;
}

}

.fish {

width: 150px;
position: absolute;
top: 100px;
left: 100px;
animation: fishy 10s ease-in-out infinite;
transform: translateX(0) rotateY(180deg) rotate(-45deg);
z-index: 10;

}

@keyframes fishy {

25% {
    transform: translateX(300px) rotateY(180deg) rotate(45deg);
}
50% {
    transform: translateX(600px) rotate(-45deg);
}
75% {
    transform: translateX(300px) rotate(45deg);
}

}

.post_container {

width: 100%;
max-width: 900px;
margin: 20px auto;
margin-top: 20px;
margin-bottom: 20px;
display: block;
color: #5b5b5b;
text-align: center;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
/** add this **/
-moz-box-sizing: border-box;
/** add this **/
-webkit-box-sizing: border-box;
/** add this **/
-ms-box-sizing: border-box;
/** add this **/

}

.post_container .post_info {

display: block;
text-align: left;

}

.post_info .post_title {

display: inline-block;
text-align: left;
font-weight: bold;
font-size: 22px;
letter-spacing: 1px;
text-transform: uppercase;

}

.post_info .post_date {

display: inline-block;
text-align: left;
font-size: 16px;
margin-left: 10px;
color: #8e8e8e;

}

.post_container .comic {

width: 100%;
display: block;
max-width: 900px;

}

.post_container img {

max-width: 100%;
max-height: 100%;
margin-top: 20px;
margin-bottom: 20px;
border: 1px solid #FFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

}

.post_container p {

margin-top: 20px;
margin-bottom: 20px;
text-align: left;

}

.post_container .share {

margin-top: 25px;
text-align: center;

}

.post_container .share_this {

color: #8e8e8e;
font-size: 16px;

}

.post_container .post_share_social_container {

margin-top: 20px;

}

.post_share_social_container .social_img {

background-image: url("grey_circle.png");

}

.post_container .prev_next_container {

width: 100%;
height: 40px;
margin-top: 30px;

}

.post_container .prev_post {

width: 48%;
height: 100%;
float: left;
background-color: #41b0f7;
border: 1px solid #41b0f7;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-transform: uppercase;
font-size: 14px;
color: white;
letter-spacing: 1px;
vertical-align: middle;
line-height: 40px;

}

.post_container .next_post {

width: 48%;
height: 100%;
float: right;
background-color: #41b0f7;
border: 1px solid #41b0f7;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-transform: uppercase;
font-size: 14px;
color: white;
letter-spacing: 1px;
vertical-align: middle;
line-height: 40px;

}

.post_container .related_posts {

margin-top: 40px;

}

.post_container .related_posts_prompt {

font-size: 15px;
text-transform: uppercase;
font-weight: bold;
text-align: left;

}

.post_container .masonry {

margin-left: 0;
margin-right: 0;
margin-top: 20px;

}

blog_masonry {

-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
text-align: center;
column-gap: 0;

}

blog_item {

max-width: 800px;
border: 3px solid #e8ecef;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 0;
color: #666666;

}

blog_item .blog_preview img {

width: 100%;
height: 450px;
object-fit: cover;

}

blog_item .blog_preview_info {

width: 100%;
background-color: #f9f9f9;
padding: 30px;
text-align: left;
box-sizing: border-box;
/** add this **/
-moz-box-sizing: border-box;
/** add this **/
-webkit-box-sizing: border-box;
/** add this **/
-ms-box-sizing: border-box;
/** add this **/

}

blog_item .blog_preview_title {

font-size: 20px;
text-transform: uppercase;
font-weight: bold;
color: #666666;
letter-spacing: 1px;

}

blog_item .blog_preview_excerpt {

color: #848484;
margin-top: 10px;

}

blog_item .blog_preview_excerpt p {

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;

}

.post_container .related_post_excerpt_container img {

width: 280px;
height: 280px;
object-fit: cover;
margin-bottom: 0px;
margin-top: 0px;
border: 1px solid #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

}

.post_container a {

text-decoration: none;
color: #5b5b5b;

}

.post_container .related_post_title {

font-size: 15px;
text-transform: uppercase;
margin-top: 15px;

}

characters {

padding: 70px 0;
display: block;
max-width: 1400px;
border-style: solid;
border-width: 1px;
position: relative;

}

.ccontainer {

margin: 0 auto;
width: 250px;
height: 200px;
position: relative;
perspective: 1000px;
z-index: 100;

}

.carousel {

height: 100%;
width: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 0.8s;

}

.citem {

display: block;
position: absolute;
background: transparent;
width: 202px;
height: 235px;
font-size: 5em;
text-align: center;
color: #FFF;
z-index: 0;

}

.a {

transform: rotateY(0deg) translateZ(250px);
background-image: url("octopus.png");
background-size: cover;

}

.b {

transform: rotateY(72deg) translateZ(250px);
background-image: url("dolphin.png");
background-size: cover;

}

.c {

transform: rotateY(144deg) translateZ(250px);
background-image: url("narwhal.png");
background-size: cover;

}

.d {

transform: rotateY(216deg) translateZ(250px);
background-image: url("octopus.png");
background-size: cover;

}

.e {

transform: rotateY(288deg) translateZ(250px);
background-image: url("dolphin.png");
background-size: cover;

}

.navigation_holder {

width: 600px;
height: 100%;
position: absolute;
margin: 0 auto;
top: 0px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

}

.next {

width: 250px;
height: 100%;
float: right;
background: yellow;
z-index: 1000;
perspective: 1200;

}

.prev {

width: 250px;
height: 100%;
float: left;
background: red;
z-index: 1000;

}

.about_container {

width: 100%;
max-width: 900px;
display: block;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
text-align: center;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;

}

.about_pic {

width: 80%;

}

.about_pic.thankyou {

width: 100%;
margin-bottom: 20px;

}

.about_text {

color: #636263;
text-align: left;
margin-bottom: 30px;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;

}

.about_text.thankyou {

text-align: center;

}

/* .about_container {

width: 100%;
max-width: 900px;
height: 340px;
display: block;
margin: 0 auto;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
margin-bottom: 50px;

}

.about_pic {

width: 45%;
height: 340px;
float: left;
background-image: url("annmita.png");
background-repeat: no-repeat;
background-size: contain;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
background-position: center;

}

.about_text {

position: relative;
float: right;
width: 45%;
display: block;
padding: 10px;
color: #636263;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;

} */

.characters_container {

margin-bottom: 0px;

}

@media screen and (max-width: 800px) {

/*
.about_pic {
    width: 100%;
    float: none;
}
.about_text {
    width: 100%;
    float: none;
}
.about_container {
    height: 100%;
    margin-bottom: 80px;
}
*/
/*

.characters_container {
  margin-bottom: 70px;
}

.home_content {
  margin-bottom: 70px;
}
*/

}

.about_title {

font-weight: bold;
font-size: 30px;

}

.about_content {

margin-top: 20px;
line-height: 22px;
font-size: 16px;

}

.about_email {

margin-top: 20px;
font-size: 14px;
font-weight: bold;
letter-spacing: 2px;

}

.fish_ll {

position: relative;
text-align: center;
margin: 0 auto;
margin-bottom: 150px;
width: 100%;
max-width: 800px;

}

.image_circle {

width: 200px;
height: 200px;
border-radius: 50%;
border: 4px solid rgb(65, 176, 247);
;

}

.rounded_image_container {

width: 100%;
position: absolute;
top: -100px;
text-align: center;

}

.rounded_image {

width: 200px;
height: 200px;
border-radius: 50%;
background-repeat: no-repeat;
margin: 0 auto;
box-sizing: border-box;
/** add this **/
-moz-box-sizing: border-box;
/** add this **/
-webkit-box-sizing: border-box;
/** add this **/
-ms-box-sizing: border-box;
/** add this **/

}

rounded_octopus {

background-image: url("splash_octopus.png");
border: 8px solid #fce4d9;
background-size: cover;

}

rounded_octopus_back {

background-image: url("octopus_icon_power.png");
border: 8px solid #fce4d9;
background-size: cover;

}

rounded_dolphin {

background-image: url("splash_dolphin.png");
border: 8px solid #c3dbea;
background-size: cover;

}

rounded_dolphin_back {

background-image: url("dolphin_icon_power.png");
border: 8px solid #c3dbea;
background-size: cover;

}

rounded_narwhal {

background-image: url("splash_narwhal.png");
border: 8px solid #f9b9c8;
background-size: cover;

}

rounded_narwhal_back {

background-image: url("narwhal_icon_power.png");
border: 8px solid #f9b9c8;
background-size: cover;

}

rounded_bubble {

background-image: url("splash_bubble.png");
border: 8px solid #bccdef;
background-size: cover;

}

rounded_bubble_back {

background-image: url("bubble_icon_power.png");
border: 8px solid #bccdef;
background-size: cover;

}

rounded_shark {

background-image: url("splash_shark.png");
background-size: cover;
border: 8px solid #abb6d9;

}

rounded_shark_back {

background-image: url("shark_icon_power.png");
background-size: cover;
border: 8px solid #abb6d9;

}

.fish_text {

width: 100%;
border: 1px solid #e8ecef;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 2px 3px rgba(0, 0, 0, .2);
padding-top: 130px;

}

.fish_name_2 {

display: inline-block;
font-size: 26px;
text-transform: uppercase;
color: #5b5b5b;
letter-spacing: 2px;

}

.fish_title_2 {

display: inline-block;
font-size: 20px;
margin-left: 15px;
color: #8e8e8e;

}

.fish_desc_2 {

margin-top: 10px;
display: block;
width: 100%;
letter-spacing: 1px;

}

.fish_desc_3 {

color: #8e8e8e;
margin-top: 10px;
display: block;
width: 100%;
letter-spacing: 1px;

}

.flipped {

-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);

}

.flipper {

/*transition*/
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
/*transform-style*/
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
-webkit-tap-highlight-color: transparent;

}

/* front pane, placed above back */

.front {

z-index: 2;

}

/* back, initially hidden pane */

.back {

/*transform*/
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);

}

/* hide back of pane during swap */

.front, .back {

/*backface-visibility*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;

}

.flip-container, .front, .back, .flipper {

width: 200px;
height: 200px;

}

.flip-container {

text-align: center;
margin: 0 auto;

}

.sidenav {

height: 100%;
/* 100% Full-height */
width: 0;
/* 0 width - change this with JavaScript */
position: fixed;
/* Stay in place */
z-index: 100000000;
/* Stay on top */
top: 0;
right: 0;
overflow-x: hidden;
/* Disable horizontal scroll */
/* Place content 60px from the top */
transition: 0.2s;
/* 0.5 second transition effect to slide in the sidenav */
background-color: white;
display: flex;
flex-flow: column;

}

/* Position and style the close button (top right corner) */

.nav_item {

width: 100%;
height: 40px;
display: flex;
align-items: center;
font-family: 'Open Sans', sans-serif;
font-weight: lighter;
font-size: 16px;
text-decoration: none;
color: black;
text-transform: uppercase;
letter-spacing: 2px;
justify-content: space-around;

}

.nav_item>img {

width: 30px;
height: 30px;

}

.nav_item .nav_label {

width: 150px;
height: 100%;
text-align: center;
display: flex;
align-items: center;

}