/* ============================================================

  SECTIONS

============================================================ */

section.module:last-child {

  margin-bottom: 0;

}

section.module h2 {

  margin-bottom: 40px;

  font-family: "Roboto Slab", serif;

  font-size: 30px;

}

section.module p {

  margin-bottom: 40px;

  font-size: 16px;

  font-weight: 100;

}

section.module p:last-child {

  margin-bottom: 0;

}

section.module.content {

  padding: 40px 0;

}

section.module.parallax {

  height: 600px;

  background-position: 50% 50%;

  background-repeat: no-repeat;

  background-attachment: fixed;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

}

section.module.parallax h1 {

  color: rgba(255, 255, 255, 1);

  font-size: 36px;

  line-height: 700px;

  text-align: center;

  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

  font-family: "Roboto Slab", sans serif;

}

section.module.parallax-1 {

  background-image: url("themes/theme-masonic/img/header.jpg");

}



section.module.parallax-2 {

  background-image: url("//images01.iqoption.com/85/7985/static-01554653302157737985.jpg");

}

section.module.parallax-3 {

  background-image: url("//images01.iqoption.com/17/9217/static-00562888035025289217.jpg");

}

  section.module.parallax img {

    max-width: 100px;

    position:absolute;

    top:200px;

    left:40%;

    z-index:99999999;

    -webkit-animation: hue 60s infinite linear;

  }













@media all and (min-width: 600px) {

  section.module h2 {

    font-size: 42px;

  }

  section.module p {

    font-size: 20px;

  }

  section.module.parallax h1 {

    font-size: 66px;

  }

  section.module.parallax img {

    max-width:150px;

    position:absolute;

    top:130px;

    left:40%;

    z-index:3;

    -webkit-animation: hue 60s infinite linear;

  }

}



@media all and (min-width: 960px) {

  section.module.parallax h1 {

    font-size: 100px;

  }

  section.module.parallax img {

    max-width:180px;

    position:absolute;

    top:100px;

    left:42%;

    z-index:99999999;

    -webkit-animation: hue 60s infinite linear;

  }

}

























/* ============================================================

  RESET - http://meyerweb.com/eric/tools/css/reset/

============================================================ */

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

  margin: 0;

  padding: 0;

  border: 0;

  font-size: 100%;

  font: inherit;

  vertical-align: baseline;

}



/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

  display: block;

}



body {

  line-height: 1;

}



ol, ul {

  list-style: none;

}



blockquote, q {

  quotes: none;

}



blockquote:before, blockquote:after,

q:before, q:after {

  content: '';

  content: none;

}



table {

  border-collapse: collapse;

  border-spacing: 0;

}



/* ============================================================

  BOX SIZING & CLEARFIX

============================================================ */

*,

*:before,

*:after {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}



.clearfix:after {

  content: "";

  display: table;

  clear: both;

}



/* ============================================================

  HTML & BODY

============================================================ */

body {

  background-color: #b4b4b4;

  color: #666666;

  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

  font-size: 14px;

  line-height: 1.5;

}



/* ============================================================

  PRIMARY STRUCTURE

============================================================ */

.wrapper {

  width: 100%;

  margin: 0 auto;

}



main {

  display: block;

  background-color: #fff;

}



.container {

  width: 100%;

  max-width: 960px;

  margin: 0 auto;

  padding: 0 20px;

}



.container h1 {

  font-family: "Roboto Slab", serif;

}



/* ============================================================

  INFO BAR

============================================================ */

.info-bar {

  padding: 5px 0;

  background-color: #262626;

  text-align: center;

}

.info-bar a.icon {

  display: inline-block;

  vertical-align: middle;

  position: relative;

  margin: 0;

  padding: 0;

  width: 30px;

  height: 30px;

  background-image: url("img/icons-dark.png");

  opacity: 0.3;

}

.info-bar .cmn-tut {

  background-position: 0 0;

}

.info-bar .cmn-prev {

  background-position: -30px 0;

}

.info-bar .cmn-next {

  background-position: -60px 0;

}

.info-bar .cmn-download {

  background-position: -90px 0;

}

.info-bar .cmn-archive {

  background-position: -120px 0;

}

.info-bar a.icon[data-title]:after {

  opacity: 1;

}

.info-bar a.icon[data-title]:hover:after {

  position: absolute;

  top: 100%;

  left: 0;

  z-index: 20px;

  content: attr(data-title);

  padding: 5px 10px;

  background-color: #000;

  color: #000;

  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

  font-size: 12px;

  white-space: nowrap;

}



/* ============================================================

  HEADER & SITE TITLE

============================================================ */

/* header */

header .branding {

  padding: 20px 0;

}

header .logo {

  margin-bottom: 20px;

  text-align: center;

}

header .logo img {

  display: inline-block;

  vertical-align: middle;

}

header .social {

  text-align: center;

}

header .social a {

  display: inline-block;

  vertical-align: middle;

  margin: 0 5px;

  width: 30px;

  height: 30px;

  color: rgba(0, 0, 0, 0);

  font-size: 0;

  text-indent: -9999px;

  background-size: 30px 30px;

  background-image: url("img/social-light.png");

  background-image: url("http://callmenick.com/_development/simple-parallax-effect/img/core/social-light.svg"), none;

  background-size: 180px 30px;

}

header .social a.fb {

  background-position: 0 0;

}

header .social a.twitter {

  background-position: -30px 0;

}

header .social a.googleplus {

  background-position: -60px 0;

}

header .social a.rss {

  background-position: -90px 0;

}

header .social a.email {

  background-position: -120px 0;

}

header .social a.search {

  background-position: -150px 0;

}

header .social a:hover {

  opacity: 0.4;

}



@media all and (min-width: 600px) {

  header .branding {

    padding-left: 60px;

  }

  header .logo {

    margin-bottom: 0;

    margin-left: -60px;

    float: left;

    width: 60px;

    height: 60px;

  }

  header .logo img {

    display: block;

    margin: 0;

  }

  header .social {

    padding: 15px 0;

    float: right;

    width: 100%;

    text-align: right;

  }

}

/* site title */

.site-title {

  padding: 5px 0;

  background-color: #818181;

  text-align: center;

}

.site-title h1 {

  color: #fff;

}



/* ============================================================

  FOOTER

============================================================ */

footer {

  padding: 20px 0;

}

footer .asides {

  margin-bottom: 20px;

}

footer aside {

  margin-bottom: 10px;

}

footer nav ul {

  list-style: none;

  margin: 0;

  padding: 0;

  text-align: center;

}

footer nav li {

  display: inline-block;

}

footer nav a {

  display: block;

  margin: 0 5px;

  color: #fff;

}

footer .logo {

  text-align: center;

}

footer .logo img {

  display: inline-block;

  vertical-align: middle;

}

footer .copyright {

  text-align: center;

}

footer .copyright small {

  color: #fff;

  font-size: 12px;

}

footer .copyright a {

  color: #818181;

}



@media all and (min-width: 600px) {

  footer aside {

    margin-bottom: 0;

    float: left;

    width: 33.3333%;

  }

  footer nav ul {

    text-align: left;

  }

  footer nav li {

    display: block;

  }

  footer nav a {

    display: inline-block;

    margin: 0;

  }

  footer .logo {

    text-align: right;

  }

}

/* ============================================================

  FUSION ADS

============================================================ */

#fusionads {

  position: fixed;

  top: 10px;

  right: 10px;

  z-index: 20;

  padding: 20px;

  background: rgba(255, 255, 255, 0.95);

  font-size: 12px;

  line-height: 1.2;

  -webkit-box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1);

  -moz-box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1);

  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1);

}



#fusionads .fusion-wrap {

  display: block;

  margin: 0 auto 10px auto;

  width: 130px;

}



#fusionads a.fusion-text {

  display: block;

  color: #787878;

}



#fusionads a.fusion-img {

  display: block;

  margin-bottom: 10px;

  width: 130px;

  height: 100px;

  background-color: #fff;

}



#fusionads a.fusion-img img {

  display: block;

  margin: 0 0 10px 0;

}



#fusionads a.fusion-poweredby {

  color: #b4b4b4;

}

#fusionads a.fusion-poweredby:hover {

  color: #818181;

}



#close-fusionad {

  position: fixed;

  top: 10px;

  right: 10px;

  z-index: 30;

  width: 20px;

  height: 20px;

  background-color: #282828;

  text-align: center;

  line-height: 20px;

  color: #fff;

  font-size: 12px;

  font-weight: 700;

}



/* ============================================================

  TEXT LEVEL SEMANTICS

============================================================ */

a {

  text-decoration: none;

  color: #b4b4b4;

}



a:hover {

  color: #818181;

}









/* ============================================================

  OVERLAY

============================================================ */



* {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

.overlay {

  position: relative;

}



.overlay:before{

  position: absolute;

  content:" ";

  top:0;

  left:0;

  width:100%;

  height:100%;

  display: none;

  z-index:0;

  display: block;

}







.black:before {

  background-color: rgba(0,0,0,0.1);

/*  background-image: url('http://shop.mowxml.org/dots.png');

  background-repeat: repeat; */

  position: absolute;

  z-index:1;

}



.box * {

    position: relative;

    /* hack */

}



/*-----------------------------------*\

  $ANIMATIONS

\*-----------------------------------*/



@-webkit-keyframes hue {

  from {

    -webkit-filter: hue-rotate(0deg);

  }



  to {

    -webkit-filter: hue-rotate(-360deg);

  }

}



















































@charset "UTF-8";



/*!

 * animate.css -http://daneden.me/animate

 * Version - 3.5.2

 * Licensed under the MIT license - http://opensource.org/licenses/MIT

 *

 * Copyright (c) 2017 Daniel Eden

 */



.animated.infinite {

  animation-iteration-count: infinite;

}





@keyframes bounce {

  from, 20%, 53%, 80%, to {

    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

    transform: translate3d(0,0,0);

  }



  40%, 43% {

    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);

    transform: translate3d(0, -30px, 0);

  }



  70% {

    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);

    transform: translate3d(0, -15px, 0);

  }



  90% {

    transform: translate3d(0,-4px,0);

  }

}



.bounce {

  animation-name: bounce;

  transform-origin: center bottom;

}



@keyframes flash {

  from, 50%, to {

    opacity: 1;

  }



  25%, 75% {

    opacity: 0;

  }

}



.flash {

  animation-name: flash;

}



/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */



@keyframes pulse {

  from {

    transform: scale3d(1, 1, 1);

  }



  50% {

    transform: scale3d(1.05, 1.05, 1.05);

  }



  to {

    transform: scale3d(1, 1, 1);

  }

}



.pulse {

  animation-name: pulse;

}



@keyframes rubberBand {

  from {

    transform: scale3d(1, 1, 1);

  }



  30% {

    transform: scale3d(1.25, 0.75, 1);

  }



  40% {

    transform: scale3d(0.75, 1.25, 1);

  }



  50% {

    transform: scale3d(1.15, 0.85, 1);

  }



  65% {

    transform: scale3d(.95, 1.05, 1);

  }



  75% {

    transform: scale3d(1.05, .95, 1);

  }



  to {

    transform: scale3d(1, 1, 1);

  }

}



.rubberBand {

  animation-name: rubberBand;

}



@keyframes shake {

  from, to {

    transform: translate3d(0, 0, 0);

  }



  10%, 30%, 50%, 70%, 90% {

    transform: translate3d(-10px, 0, 0);

  }



  20%, 40%, 60%, 80% {

    transform: translate3d(10px, 0, 0);

  }

}



.shake {

  animation-name: shake;

}



@keyframes headShake {

  0% {

    transform: translateX(0);

  }



  6.5% {

    transform: translateX(-6px) rotateY(-9deg);

  }



  18.5% {

    transform: translateX(5px) rotateY(7deg);

  }



  31.5% {

    transform: translateX(-3px) rotateY(-5deg);

  }



  43.5% {

    transform: translateX(2px) rotateY(3deg);

  }



  50% {

    transform: translateX(0);

  }

}



.headShake {

  animation-timing-function: ease-in-out;

  animation-name: headShake;

}



@keyframes swing {

  20% {

    transform: rotate3d(0, 0, 1, 15deg);

  }



  40% {

    transform: rotate3d(0, 0, 1, -10deg);

  }



  60% {

    transform: rotate3d(0, 0, 1, 5deg);

  }



  80% {

    transform: rotate3d(0, 0, 1, -5deg);

  }



  to {

    transform: rotate3d(0, 0, 1, 0deg);

  }

}



.swing {

  transform-origin: top center;

  animation-name: swing;

}



@keyframes tada {

  from {

    transform: scale3d(1, 1, 1);

  }



  10%, 20% {

    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);

  }



  30%, 50%, 70%, 90% {

    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);

  }



  40%, 60%, 80% {

    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);

  }



  to {

    transform: scale3d(1, 1, 1);

  }

}



.tada {

  animation-name: tada;

}



/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */



@keyframes wobble {

  from {

    transform: none;

  }



  15% {

    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);

  }



  30% {

    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);

  }



  45% {

    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);

  }



  60% {

    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);

  }



  75% {

    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);

  }



  to {

    transform: none;

  }

}



.wobble {

  animation-name: wobble;

}



@keyframes jello {

  from, 11.1%, to {

    transform: none;

  }



  22.2% {

    transform: skewX(-12.5deg) skewY(-12.5deg);

  }



  33.3% {

    transform: skewX(6.25deg) skewY(6.25deg);

  }



  44.4% {

    transform: skewX(-3.125deg) skewY(-3.125deg);

  }



  55.5% {

    transform: skewX(1.5625deg) skewY(1.5625deg);

  }



  66.6% {

    transform: skewX(-0.78125deg) skewY(-0.78125deg);

  }



  77.7% {

    transform: skewX(0.390625deg) skewY(0.390625deg);

  }



  88.8% {

    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);

  }

}



.jello {

  animation-name: jello;

  transform-origin: center;

}