@import url('https://fonts.googleapis.com/css?family=Roboto');
body {font-family: Roboto, Sans-serif;background-color:#fff;}

p {
    margin: 0 0 28px;
    padding: 0;
    font-weight: 400;

}

a {transition: all 0.3s ease;}



@font-face {
	font-family: 'BebasNeueRegular';
	src: url('../fonts/BebasNeue-webfont.eot');
	src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/BebasNeue-webfont.woff') format('woff'), url('../fonts/BebasNeue-webfont.ttf') format('truetype'), url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}


/* TOP NAVIGATION FOR DIFFERENT SECTIONS OF BIG FISH TRAINING GROUP */

#reveal1 > h1 {font-family: BebasNeueRegular, arial, sans-serif;font-size:5.2em;margin-bottom:0;}
.bigfishgroupwrapper h3 {font-family: BebasNeueRegular, arial, sans-serif;font-size:1.4em;max-width:220px;text-align:center;margin:60px auto 50px auto;color:#243974;}
.bigfishgroupwrapper p {font-size:13px;min-height:30px;max-width:220px;text-align:left;margin:15px auto 0 auto;display:block;}
.bigfishgroupwrapper p.desc {position:absolute;left:12px;width:145px;}
.bigfishgroupwrapper p.more-link {position:absolute;right:12px;width:65px;}
h2.home-subhead {font-weight:normal;}
h2.home-subhead span.highlight {color:#243974;}
.separator {height:10px;}

/* The top navigation menu */
.bigfishgroup_nav {
    height: 115px; /* height - change this with JavaScript */
    width: 100%; /* 100% width - change this with JavaScript */
    margin: 0 auto;
    position: fixed; /* Stay in place */
    z-index: 3; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #fff; /* White*/
    overflow: hidden; /* Disable horizontal scroll */
    padding-top: 0; /* Place content 0px from the top */
    transition: 1.0s; /* 1.0 second transition effect to slide in the bigfishgroup_nav */
    background-color:white;
}

.bigfishgroup_nav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.bigfishgroup_nav a:hover {
    color: #f1f1f1;
}

.bigfishgroup_nav .closebigfishgroup {
	position:absolute;
	right:40px;
	top:200px;
	width:25px;
	color:#fff;
}
.bigfishgroup_nav .closebigfishgroup a {
	font-size:40px;
	font-weight:700;
}
.bigfishgroup_nav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#logo {width:100%;float:left;padding-right:0;text-align:center;}
.bigfishgroupwrapper {height:350px;width:100%;float:left;color:#333;padding-right:0;text-align:center;position:relative;}
#logo img {/* MAKE IMAGE WHITE -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);*/ width: 250px; height: auto;}
@media screen and (max-height: 450px) {
  .bigfishgroup_nav {padding-top: 15px;}
  .bigfishgroup_nav a {font-size: 18px;}
}

@media screen and (min-width: 1020px) {
    #logo {width:auto;float:left;padding-right:0;text-align:left;}
	.bigfishgroupwrapper {max-width:240px;margin:0 auto;}
	.bigfishgroupwrapper.first, .bigfishgroupwrapper.second {border-right: 2px dotted #ccc;}
}

/* #main Style page content - pushes the page content down when opening the top navigation */

#main {
    transition: margin-top .5s;
    padding: 0;
    margin-top:0;
}

#herovideo{
    transition: margin-top .5s;
}

#bigfishmenuwrap {
    position:absolute;
    top:100px;
    z-index:1;
    text-align:center;
    width:100%;
}

#bigfishmenu {
    transition: margin-top .5s;
    padding: 20px;
    margin:0 auto 0 auto;
}

.btn {
  color: #ffffff;
  font-size: 14px;
  background: #ea871d;
  padding: 5px;
  border: 0;
  text-decoration: none;
  box-shadow: 0px 0px 0px 3px #ffd600;
}

.btn:hover {
  background: #c15111;
  text-decoration: none;
}

.bigfishgroupwrapper p a {padding:0!important;}

.more-link button {padding-left:15px;padding-right:15px;}

.show_me {
visibility: visible;
opacity: 1;
opacity: 1;
transition: visibility 300ms linear 300ms, opacity 300ms;
}

.hide_me {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 200ms, opacity 200ms;
transition: all 200ms ease-in;
}

/* ANIMATED ICONS */

.animate1{
  animation: animationFrames1 ease 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: animationFrames1 ease 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: animationFrames1 ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: animationFrames1 ease 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: animationFrames1 ease 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes animationFrames1{
  0% {
    opacity:0;
    transform:  translate(0px,25px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes animationFrames1{
  0% {
    opacity:0;
    -moz-transform:  translate(0px,25px)  ;
  }
  100% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes animationFrames1 {
  0% {
    opacity:0;
    -webkit-transform:  translate(0px,25px)  ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes animationFrames1 {
  0% {
    opacity:0;
    -o-transform:  translate(0px,25px)  ;
  }
  100% {
    opacity:1;
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes animationFrames1 {
  0% {
    opacity:0;
    -ms-transform:  translate(0px,25px)  ;
  }
  100% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  ;
  }
}

.home-icon-set {text-align:center;width:100%;margin:0 auto;display:none;}
.home-icon-pic {display:none;float:left;width:100px;}



/**
 * Modal starts here.
 * For modal-inner class, see size classes above
 **/
 
 /* MODAL */

.modal {
  display: none;
}

.vanilla-modal .modal {
  display: block;
  position: fixed;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: -1;
  opacity: 0;
  font-size: 0;
  transition: opacity 0.2s, z-index 0s 0.2s;
  text-align: center;
  overflow: hidden;
  overflow-y: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.vanilla-modal .modal > * {
  display: inline-block;
  white-space: normal;
  vertical-align: middle;
  text-align: left;
}

.vanilla-modal .modal:before {
  display: inline-block;
  overflow: hidden;
  width: 0;
  height: 100%;
  vertical-align: middle;
  content: "";
}

.vanilla-modal.modal-visible .modal {
  /*z-index: 99;*/
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.2s;
}


.modal-visible .modal-inner {
  z-index: 100;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.2s, transform 0.2s;
}

a[rel="modal:close"] {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  font-size: 13px;
  font-family:Roboto, sans-serif;
  cursor: pointer;
  text-align: center;
  background: #fff;
  box-shadow: -1px 1px 2px rgba(0,0,0,0.2);
}

.modal_prev {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  cursor: pointer;
  text-align: center;
}

.modal_next {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  cursor: pointer;
  text-align: center;
}

.modal_weblink {
  width:100%;
  text-align: center;
  margin:0 auto;
  padding-top:45px;}
  
.service-icon {
display:block;font-size:45px;color:#5878AD;
background-color: #eee;
border: 4px solid #ffd600;
box-shadow: 0px 0px 0px 3px #ffd600;
border-color: #EB8917;
width: 80px;
    height: auto;
    margin: 0 auto;
    padding: 12px 12px;
    text-align: center;
    text-align: center;
    border-radius: 50%;}

.service-icon:hover {
color:#eee;
background-color: #5878AD;}

.courselist img {
  width: 100%;
  /*display: block;*/
  }
  
.text-center {text-align:center;}  
 .talented-subhead  {font-family: Roboto, arial, sans-serif;font-size:48px;}
  
  
  
  
  
  
  /*--------------------------------------------------------
  /* START MENU STYLING
  --------------------------------------------------------*/

   /** Navbar **/
    nav li { line-height:2em; text-align:center; } nav ul { padding:0.5em 1em; }
    nav a .fa { margin-left:0.25em; } nav ul, nav li, nav a { text-decoration:none; }
    nav a:focus, nav a:hover { text-decoration:underline; }
    nav > ul > ul > li { display:inline-block; border-right:1px dotted #ccc; }
    nav > ul > ul > li > a { display:block; padding:0 1em; }
    nav > ul > ul > li > ul { position:absolute; visibility:hidden; }
    nav > ul:focus > ul, nav > ul:hover > ul, nav > ul > ul > li:focus > ul, nav > ul > ul > li:hover > ul { display:block; visibility:visible; }
    nav > ul > ul ul { margin:0; margin-left:-4px; padding:0 1em 0.5em; font-style:normal; box-shadow:0px 1px 2px #ccc; background-color:#fff; z-index:3000000; }


    /** XSMALL **/
    @media screen and (min-width: 0px) {
    #bigfish_nav {position:relative;margin-top:0;margin-bottom:10px;z-index:2; /* Space above/below menu items */ border-top: 2px dotted #fff; border-bottom: 2px dotted #fff;}
	ul#bigfish_nav {width:75%;text-align:center;margin:0 auto;}
	#bigfish_nav li {display:inline; line-height:1.1em; list-style-type:none; font-family:Roboto, Sans-serif;font-weight:400;}
    #bigfish_nav li a, a.nav-toggle {font-size:1.1em;text-decoration:none;color:#fff;}
	#bigfish_nav li a:hover, .nav-toggle a:hover, #bigfish_nav li.active a {color:#695999;}
	.leftnav {text-align:center;padding-right:14px;}
	.rightnav {text-align:center;padding-right:14px;}
	a.nav-toggle {font-size:1.5em; list-style-type: none;font-family:Roboto, Sans-serif;font-weight:400;position:relative;top: -110px;left: 85%;}
	}

    /** MEDIUM **/
    @media screen and (min-width: 600px) {
	ul#bigfish_nav {width:68%;text-align:center;margin:0 auto;}
    }

    /** LARGE **/
    @media screen and (min-width: 1120px) {
	ul#bigfish_nav {width:100%;margin-top:10px;margin-bottom:10px; /* Space above menu items */}
	li.leftnav {text-align:right;padding-left: 20px;padding-right: 0;}
	li.rightnav {text-align:left;padding-left: 0;padding-right: 20px;}
    nav > ul > li { display:none; } nav > ul > ul { display:block; } nav > ul > ul > li { display:inline-block; } nav > ul > ul > li > ul { position:absolute; }
    }


  
  /*--------------------------------------------------------
  /* END MENU STYLING
  --------------------------------------------------------*/
  

/* START STYLES FOR TREASURE CHESTS ON HOME PAGE */

.chest {
  position:relative;
  height:200px;
  width:300px;
  margin:0 auto;
}
.chest img {
  position:absolute;
  left:14px;
  top:14px;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  height:200px;
  width:300px;

}



/* END STYLES FOR TREASURE CHESTS ON HOME PAGE */

  
a.course-link {text-decoration:none;padding:0;color:#666;text-transform:uppercase;}
a.course-link:hover {color: #243974;}

p.featured-course-link {display:block;float:right;margin-right:14px;-webkit-margin-before:0;-webkit-margin-after:0;}
p.featured-course-link a {text-decoration:none;color:#333;background-color:#fff;border:1px solid #253A74;padding:8px;display:inline-block;font-weight:bold;font-family:Roboto;font-size:0.9em;-webkit-margin-before:0;-webkit-margin-after:0;}
p.featured-course-link a:hover {background-color:#253A74;color: #eee;}

.home-course-list-top-row {margin-top:32px;padding-bottom:32px;}

.home-course-list {margin-bottom:32px;padding-bottom:32px;}

.home-course-list:nth-child(1), .home-course-list:nth-child(3) {
    background-color:#f1f6ff;
}

.courselist h3 {font-family:BebasNeueRegular, sans-serif; color:#253A74;margin-top:8px;margin-bottom:0;font-size:4.3rem;}
.courselist h5  {font-family:Lato, sans-serif; }
h5.courselist-course-title {display:inline-block;padding-top:0;}
img.heart {display:none;}

@media screen and (min-width: 1020px) {
    .below-the-fold {margin-top:200px;}
}