/*
Theme Name: Moon-theme
Author: CloudbirdStudio
Description: custom WordPress theme for Moon Rabbit Designs
Version: 0.0.1
Tags: none
*/

* {box-sizing: border-box;margin: 0;padding: 0;}

body{padding-bottom: 0;}

@font-face {
    font-family: Axis;
    src: url('fonts/axis.otf') format('opentype');
    font-style: normal;
    font-weight: 600;
}

@font-face {
    font-family: brandon_text;
    src: url('fonts/brandon_text/BrandonText-Bold.otf') format('opentype');
    font-weight: 400;
}

@font-face {
    font-family: brandon_text;
    src: url('fonts/brandon_text/BrandonText-Regular.otf') format('opentype');
    font-weight: 300;
}

@font-face {
    font-family: brandon_text;
    src: url('fonts/brandon_text/BrandonText-Light.otf') format('opentype');
    font-weight: 200;
}

@font-face {
    font-family: brandon_text;
    src: url('fonts/brandon_text/BrandonText-Thin.otf') format('opentype');
    font-weight:100;
}

@font-face {
      font-family: FontAwesome;
      font-style: normal;
      font-weight: 400;
      src: url("fonts/fontawesome/fa-brands-400.eot") format("embedded-opentype"), url("fonts/fontawesome/fa-brands-400.woff2") format("woff2"), url("fonts/fontawesome/fa-brands-400.woff") format("woff"), url("fonts/fontawesome/fa-brands-400.ttf") format("truetype"), url("fonts/fontawesome/fa-brands-400.svg") format("svg"); }

.whiteB{ background-color: #ffffff;}
.whiteT{ color: #ffffff;}
.blueB{ background-color: #26387E;}
.blueT{ color: #26387E;}
.greyB{ background-color: #D9E1EB;}
.grey2B{ background-color: #F0F0EF;}
.greyT{ color: #D9E1EB;}
.paleBlueB{ background-color: #D9E1EB;}
.paleBlueT{ color: #D9E1EB;}
.pinkB{ background-color: #FAF4F4;}
.pinkT{ color: #FAF4F4;}
.orangeB{ background-color: #F16C65;}
.orangeT{ color: #F16C65;}
.lobsterB{ background-color: #F26C66;}
.lobsterT{ color: #F26C66;}

h1, h3{font-family: Axis, helvetica;}
html, h2, h3, h4, p, a, input, .txtArea, data-caption {font-family: brandon_text;}

a{text-decoration: none;user-select: none;-webkit-user-select: none;}

/*--------------------------------------------------------------
NAVIGATION
--------------------------------------------------------------*/

#mobile-nav{
    display: block;
    position: fixed;
    cursor: pointer;
    top: 4.4vw;
    right: 4.4%;
    display: block;
    cursor:pointer;
    z-index: 7;
}

#mobile-nav div{
    width: 12vw;
    height: 1.5vw;
    border-radius: 2px;
    margin: 1vw 0;
    background-color: #26387E; 
    -webkit-transition: background-color 0.4s ease;
    -moz-transition: background-color 0.4s ease;
    -o-transition: background-color 0.4s ease;
    -ms-transition: background-color 0.4s ease;
    transition: background-color .4s ease;
}

#mobile-nav:hover div{
    background-color: #F26C66;
}

.menu-primary-menu-container{text-align: center;background-color:#ffffff; padding: 19px 0;}


header{ width: 100%;}

header img{
    display: block;
    margin: 14px auto 14px auto;
    width: 100%;
}

/*--------------------------------------------------------------
SPRITE LOGO
--------------------------------------------------------------*/
header {
  position: relative;
  width: 210px;
  height: 88px;
  margin: 0 auto 17px auto; 
}

.spritelogo {
    width: 100%;
    height: 100%;
    background: url('img/Logo_sprite_24fps.png') no-repeat;
    background-size: cover;
    animation: play 2.1s steps(51) forwards;
}

@keyframes play {
    0% { background-position: 0 0px; }
    100% { background-position: 0 -4590px; }
}

/******* media queries ******/
/*---- TABLET ---- */
@media (min-width: 768px) {
    header { width: 400px; height: 171px;}
    .spritelogo {background: url('img/Logo_sprite_fullSize_24fps.png') no-repeat;background-size: cover;}

    @keyframes play {
    0% { background-position: 0 0px; }
    100% { background-position: 0 -8747px; }
    }
}

/*---- DESKTOP ---- */ 
@media (min-width: 1024px) {
    header { width: 461px; height: 198px;}
    .spritelogo {background: url('img/Logo_sprite_fullSize_24fps.png') no-repeat;background-size: cover;}

    @keyframes play {
    0% { background-position: 0 0px; }
    100% { background-position: 0 -10082px; }
    }
}

/*---- SPRITE LOGO - end ---- */ 

#desktopMenu{
    display: none;
    position: sticky;
    position: -webkit-sticky;
    cursor: pointer;
    top: 0;
    z-index: 5;
    margin-bottom: 20px;
    }

.menu-item{display: inline;}



#desktopMenu .menu-item a{
    padding: 4px 11px;  
    font-size: 1em;
    color: #26387E;
    /*background-color:rgba(255,255,255,0.7); */
    text-decoration: none;
    text-transform:uppercase;
    border-radius: 2px;
    -webkit-transition: color 0.4s ease;
    -moz-transition: color 0.4s ease;
    -o-transition: color 0.4s ease;
    -ms-transition: color 0.4s ease;
    transition: color .4s ease;
}

#desktopMenu .menu-item a:hover{color: #F26C66;text-decoration: underline;}

.current-menu-item a{ color: #F26C66 !important;}

#mySidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 8;
    top: 0;
    left: 0;
    background-color: #ffffff;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 10px;
}

#mySidenav a {
    padding: 8px 0px 8px 0px;
    text-decoration: none;
    font-size: 3em;
    color: #26387E;
    display: block;
    text-align: center;
    transition: 0.3s;
}

#mySidenav .menu-primary-menu-container{margin-top: 22%;}

@media (max-height: 414px) {
    #mySidenav .menu-primary-menu-container{margin-top: 0;}
}

#mySidenav a:hover { color: #F26C66;text-decoration: underline;}

#mySidenav > a:nth-child(1) {
    position: absolute;
    top: 0;
    right: 30px;
    cursor: pointer;
    font-size: 4em;
}


.container{width: 100%; overflow: hidden;}

/*--------------------------------------------------------------
SECOND NAVIGATION MENU
--------------------------------------------------------------*/

.nav-headings2 {
    display: none;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 50px;
    z-index: 5;
    width: 100%;
    height: 50px;
    text-align: center;
}

.nav-headings2 li a {
    color: #392F27;
    font-size: 1.2em;
    height: 50px;
    margin: 14px 20px 20px 0;
    padding: 12px 12px 0 12px;
    box-sizing: border-box;
    -webkit-transition: color 0.4s ease;
    -moz-transition: color 0.4s ease;
    -o-transition: color 0.4s ease;
    -ms-transition: color 0.4s ease;
    transition: color .4s ease;
}

.nav-headings2 li a:hover {
    color: #F26C66;text-decoration: underline;
}

.current-menu-item a, .all .menu-item-73 > a, .all .menu-item-87 > a {
    color: #F26C66 !important;
}

.back-btn{
    position: relative;
    top: 25px;
    font-family: brandon_text;
    font-size: 1.1em;
    padding: 4px 16px;
    border-radius: 0px;
    display: block;
}

.back-btn:hover{
    color: #D14944;
}


/*--------------------------------------------------------------
DROPDOWN NAVIGATION MENU
--------------------------------------------------------------*/

.dropbtn {
    display: block;
  background-color: #ffffff;
  color: #26387E;
  padding: 1vw 6vw;
  font-size: 3.6vw;
    font-weight: 100;
    border-radius: 3px;
    outline: none;
  cursor: pointer;
    -webkit-transition: background-color 0.4s ease;
    -moz-transition: background-color 0.4s ease;
    -o-transition: background-color 0.4s ease;
    -ms-transition: background-color 0.4s ease;
    transition: background-color .4s ease;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #FAF4F4;
}

.dropdown {
  margin-left: calc(50% - 14vw);
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
    border-radius: 4px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1; 
}

.dropdown-content a {
    display: block;
  color: black;
    font-size: 3.5vw;
    font-weight: 200;
  padding: 12px 16px;
  text-decoration: none;
    transition: background-color .3s ease;
}

.dropdown a:hover {background-color: #FAF4F4;text-decoration: underline;}


.showDropdwn{display: block;}
/*--------------------------------------------------------------
SHAPES
--------------------------------------------------------------*/
.redCircle, .pinkMoon, .yellowShape, .pinkShape2, .yellowShape2, .greyMoon, .pinkShape, .greyShape{ 
    position:absolute;
    background-repeat: no-repeat;
    background-position: center center; 
    background-size: 100% 100%;
    z-index: 1;
}

.redCircle{
    width: 10vw;
    height: 10vw;
    top: 89%;
    left: -4%;
    background-image: url(img/redCircle.png);
}

.pinkMoon{
    width: 13vw;
    height: 13vw;
    top: -2%;
    right: -4%;
    background-image: url(img/pinkMoon.png);
}

.yellowShape{
    width: 13vw;
    height: 13vw;
    top: 20%;
    left: -5%;
    background-image: url(img/yellowShape.png);
}

.pinkShape2{
    width: 15vw;
    height: 14vw;
    top: 7%;
    left: -7%;
    background-image: url(img/pinkShape2.png);
}

.yellowShape2{
    width: 10vw;
    height: 10vw;
    bottom: 44%;
    left: -4%;
    background-image: url(img/yellowShape.png);
}

.greyMoon{
    width: 18vw;
    height: 19vw;
    top: 24%;
    right: -13%;
    background-image: url(img/greyMoon.png);
}

.pinkShape{
    width: 17vw;
    height: 15vw;
    bottom: 9%;
    right: -4%;
    background-image: url(img/pinkShape.png);
}

.greyShape{
    width: 10vw;
    height: 10vw;
    bottom: -0.7%;
    left: -6%;
    background-image: url(img/greyShape.png);
}

/*--------------------------------------------------------------
HOME PAGE
--------------------------------------------------------------*/
/*----- HELLO section  --------*/
.hello, .whatWeDo, .skills{position: relative;margin: 0 17px 36px 17px;}

.container > .portfolio > h1:nth-child(1),
.container > .about-us > h1:nth-child(1),
.container > .contact-us > h1:nth-child(1)
{padding-top: 9vw;}

.mainT{font-size: 14vw;}
.mainT2{font-size: 4.9vw;text-align: center;padding-top: 24px;}

.whatWeDo > span img, .about-us span > img, .contact-us span > img{
    width: 93%;
    margin: 6% 0  12% 4%;
    padding: 12px;
    background-color: #ffffff;
}

/*----- WHAT WE DO section --------*/

.whatWeDo{text-align: center;}

.whatWeDo > h1:nth-child(1){
    font-size: 11vw;
    padding: 18% 0 37px 0;
}

.whatWeDo h3{
    display: inline-block;
    padding-left: 30px;
    margin-bottom: 18px;
    font-size: 4vw;
    line-height: 1.3;
}

.home > div > .whiteB{padding: 10px;max-width: 800px; margin: 10% auto 0 auto;}

.whatWeDo .portfolioContainer:nth-child(2), .whatWeDo .portfolioContainer:nth-child(3), .whatWeDo .portfolioContainer:nth-child(4), .whatWeDo .portfolioContainer:nth-child(5), .whatWeDo .portfolioContainer:nth-child(6){
    display: none;
}

/* image labels fade */

.portfolioContainer, .portfolioContainer2{
    display: inline-block;
    position: relative;
    width: 100%;
}

.home > div.whatWeDo.paleBlueB.blueT > div.whiteB > div:nth-child(1) > h4{width: 100%;}

.image {
    width: 84%;
    height:inherit;    
    object-fit:cover;
    opacity: 1;
    transition: .5s ease;
    backface-visibility: hidden;
}

.overlayText{
    position: absolute;
    top: 40%;
    width: 84%;
    font-size: 6vw;
        cursor: default;
    text-align: center;
    transition: .5s ease;
    opacity: 0;
}

.overlayImage{
    position: absolute;
    width: 84%;
    left:0;
    top: 0;
    height:inherit;    
    object-fit:cover;
    opacity: 1;
    transition: .5s ease;
    backface-visibility: hidden;
    transition: .5s ease;
    opacity: 0;
}

.portfolioContainer > h4{color: #26387E;}

.portfolioContainer:hover .image {opacity: 0.3;}

.portfolioContainer2:hover .image {opacity: 0;}

.portfolioContainer:hover .overlayText, .portfolioContainer2:hover .overlayText, .portfolioContainer2:hover .overlayImage {opacity: 1;}


.view{
    clear: both;
    text-transform: uppercase;
    background-color: #F26C66;
    color: #ffffff;
    font-size: 3vw;
    padding: 2%;
    letter-spacing: 3;
    text-align: center;
    font-weight:200;
    margin: 3% 30%;
    border-radius: 3px;
    -webkit-transition: background-color 0.4s ease;
    -moz-transition: background-color 0.4s ease;
    -o-transition: background-color 0.4s ease;
    -ms-transition: background-color 0.4s ease;
    transition: background-color .4s ease;
}

.whatWeDo > h2:hover, .skills div > h2:nth-child(3):hover, .view:hover {
    color: #F26C66;
    background-color: #ffffff;
}

.spaceAfter{
    width: 100%;
    height: 30px; 
} 

footer, .clear{clear: both;}

/*----- PROFESSIONAL SKILLS section  --------*/

.subHeading{text-align: center; padding-top: 40px; margin-bottom: 37px; }

.skills div > h1, .about-us > div > h1{
    text-align: center;
    font-size: 7.6vw;
    padding-top: 12%;
}


.contact-link h2{
    font-size: 5vw;
    font-weight:200;
    color: #ffffff;
    padding: 0 0 30px 11vw;
    text-decoration: underline;
}

.contact-link h2:hover{color: #26387E}


.skills > span img, .contact-us span > img{width: 84%; margin: 0 0 98px 9%;}

.infoBlock{
    display: block;
    width: 60%;
    margin: 0 auto;

}

.skills.pinkB > .infoBlock > h2:nth-child(2){
    padding-bottom: 22px;
}

.skills.pinkB > .infoBlock > h2:nth-child(2):hover{
    color: #26387E;
}

.sandles{
    padding-top: 40%;
    background-image: url("img/sandles.png");
    background-repeat: no-repeat;
    background-size:cover;
    background-position: center center;
}

.infoBlock > h2:nth-child(1){
    font-size: 7vw;
    padding: 6vw 11vw 12vw 11vw;
    line-height: 1.1;
    font-weight:300;
}

.infoBlock > h2:nth-child(2){
    font-size: 0.9em;
    text-transform: uppercase;
    text-decoration: underline;
    text-align: center;
    -webkit-transition: color 0.4s ease;
    -moz-transition: color 0.4s ease;
    -o-transition: color 0.4s ease;
    -ms-transition: color 0.4s ease;
    transition: color .4s ease;
}

.skills div:last-of-type{
    width: 100%;
    height: 6%;
}

/*--------------------------------------------------------------
PORTFOLIO page
--------------------------------------------------------------*/
.home, .portfolio, .about-us, .contact-us{
    position: relative;
    margin: 0 10px 0 10px;
    /* overflow: hidden; */
}

.portfolio h1, .about-us h1, .contact-us h1{text-align: center;}

.portfolio .portfolioContainer, .portfolio .portfolioContainer2{margin: 20px 8%;}

.portfolio .pinkMoon{
    top: 8%;
    right: -2%;
}

/*--------------------------------------------------------------
UiKIT LIGHTBOX
--------------------------------------------------------------*/


/* ========================================================================
   Component: Lightbox
 ========================================================================== */
/*
 * 1. Hide by default
 * 2. Set position
 * 3. Allow scrolling for the modal dialog
 * 4. Horizontal padding
 * 5. Mask the background page
 * 6. Fade-in transition
 */
.uk-lightbox {
  /* 1 */
  display: none;
  /* 2 */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1010;
  /* 5 */
  background:#EFBDD7;
  /* 6 */
  opacity: 0;
  transition: opacity 0.15s linear;
}
/*
 * Open
 * 1. Center child
 * 2. Fade-in
 */
.uk-lightbox.uk-open {
  display: block;
  /* 2 */
  opacity: 1;
}
/* Page
 ========================================================================== */
/*
 * Prevent scrollbars
 */
.uk-lightbox-page {
  overflow: hidden;
}
/* Item
 ========================================================================== */
/*
 * 1. Center child within the viewport
 * 2. Not visible by default
 * 3. Color needed for spinner icon
 * 4. Optimize animation
 * 5. Responsiveness
 *    Using `vh` for `max-height` to fix image proportions after resize in Safari and Opera
 *    Using `vh` and `vw` to make responsive image work in IE11
 */
.uk-lightbox-items > * {
  /* 1 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* 2 */
  display: none;
  justify-content: center;
  align-items: center;
  /* 3 */
  color: rgba(255, 255, 255, 0.7);
  /* 4 */
  will-change: transform, opacity;
}
/* 5 */

.uk-lightbox-items > * > :not(iframe) {
  width: 90%;
  max-width: 640px;
  height: auto;
}
/*---- TABLET ---- */
@media (min-width: 768px) {.uk-lightbox-items > * > :not(iframe) {width: 54%;}}
/*---- DESKTOP ---- */
@media (min-width: 1024px) {.uk-lightbox-items > * > :not(iframe) {width: 40%;}}


.uk-lightbox-items > .uk-active {
  display: flex;
}

/* Toolbar
 ========================================================================== */
/* Caption
 ========================================================================== */
.uk-lightbox-toolbar {
    padding: 1% 20px 2% 20px;
    background: rgba(255, 255, 255, 0.3);
    font-size: 7vw;
    font-weight: 200;
}

/* Iframe
 ========================================================================== */
.uk-lightbox-iframe {
  width: 80%;
  height: 80%;
}
/* ========================================================================
   Component: Slideshow
 ========================================================================== */
/*
 * 1. Prevent tab highlighting on iOS.
 */
.uk-slideshow {
  /* 1 */
  -webkit-tap-highlight-color: transparent;
}
/* Items
 ========================================================================== */
/*
 * 1. Create position and stacking context
 * 2. Reset list
 * 3. Clip child elements
 * 4. Prevent displaying the callout information on iOS.
 */
.uk-slideshow-items {
  /* 1 */
  position: relative;
  z-index: 0;
  /* 2 */
  margin: 0;
  padding: 0;
  list-style: none;
  /* 3 */
  overflow: hidden;
  /* 4 */
  -webkit-touch-callout: none;
}
/* Item
 ========================================================================== */
/*
 * 1. Position items above each other
 * 2. Take the full width
 * 3. Clip child elements, e.g. for `uk-cover`
 * 4. Optimize animation
 * 5. Disable horizontal panning gestures in IE11 and Edge
 */
.uk-slideshow-items > * {
  /* 1 */
  position: absolute;
  top: 0;
  left: 0;
  /* 2 */
  right: 0;
  bottom: 0;
  /* 3 */
  overflow: hidden;
  /* 4 */
  will-change: transform, opacity;
  /* 5 */
  touch-action: pan-y;
}
/*
 * Hide not active items
 */
.uk-slideshow-items > :not(.uk-active) {
  display: none;
}

/* ========================================================================
   Component: Position
 ========================================================================== */
/* Directions
 ========================================================================== */
[class*='uk-position-top'],
[class*='uk-position-bottom'],
[class*='uk-position-left'],
[class*='uk-position-right'],
[class*='uk-position-center'] {
  position: absolute !important;
}
/* Edges
 ========================================================================== */
/* Don't use `width: 100%` because it is wrong if the parent has padding. */
.uk-position-top {
  top: 0;
  left: 0;
  right: 0;
}
.uk-position-bottom {
  bottom: 0;
  left: 0;
  right: 0;
}
.uk-position-left {
  top: 0;
  bottom: 0;
  left: 0;
}
.uk-position-right {
  top: 0;
  bottom: 0;
  right: 0;
}
/* Corners
 ========================================================================== */
.uk-position-top-left {
  top: 0;
  left: 0;
}
.uk-position-top-right {
  top: 0;
  right: 0;
}
.uk-position-bottom-left {
  bottom: 0;
  left: 0;
}
.uk-position-bottom-right {
  bottom: 0;
  right: 0;
}
/*
 * Center
 * 1. Fix text wrapping if content is larger than 50% of the container.
 */
.uk-position-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 1 */
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
}
/* Vertical */
[class*='uk-position-center-left'],
[class*='uk-position-center-right'] {
  top: 50%;
  transform: translateY(-50%);
}
.uk-position-center-left {
  left: 0;
}
.uk-position-center-right {
  right: 0;
}
.uk-position-center-left-out {
  right: 100%;
  width: -moz-max-content;
  width: max-content;
}
.uk-position-center-right-out {
  left: 100%;
  width: -moz-max-content;
  width: max-content;
}
/* Horizontal */
.uk-position-top-center,
.uk-position-bottom-center {
  left: 50%;
  transform: translateX(-50%);
  /* 1 */
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
}
.uk-position-top-center {
  top: 0;
}
.uk-position-bottom-center {
  bottom: 0;
}
/* Cover
 ========================================================================== */
.uk-position-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
/* Utility
 ========================================================================== */
.uk-position-relative {
  position: relative !important;
}
.uk-position-absolute {
  position: absolute !important;
}
.uk-position-fixed {
  position: fixed !important;
}
.uk-position-z-index {
  z-index: 1;
}

/* ========================================================================
   Component: Transition
 ========================================================================== */
/* Toggle (Hover + Focus)
 ========================================================================== */
/*
 * 1. Prevent tab highlighting on iOS.
 */
.uk-transition-toggle {
  /* 1 */
  -webkit-tap-highlight-color: transparent;
}
/*
 * Remove outline for `tabindex`
 */
.uk-transition-toggle:focus {
  outline: none;
}
/* Transitions
 ========================================================================== */
/*
 * The toggle is triggered on touch devices by two methods:
 * 1. Using `:focus` and tabindex
 * 2. Using `:hover` and a `touchstart` event listener registered on the document
 *    (Doesn't work on Surface touch devices)
 *
 * Note: Transitions don't work with `uk-postion-center-*` classes because they also use `transform`,
 *       therefore it's recommended to use an extra `div` for the transition.
 */
.uk-transition-fade,
[class*='uk-transition-scale'],
[class*='uk-transition-slide'],
.uk-transition-stroke {
  transition: 0.3s ease-out;
  transition-property: opacity, transform, filter, stroke-dashoffset;
  opacity: 0;
}
/*
 * Fade
 */
.uk-transition-toggle:hover .uk-transition-fade,
.uk-transition-toggle:focus .uk-transition-fade,
.uk-transition-active.uk-active .uk-transition-fade {
  opacity: 1;
}
/*
 * Scale
 * Note: Using `scale3d` for better image rendering
 */
.uk-transition-scale-up {
  transform: scale3d(1, 1, 1);
}
.uk-transition-scale-down {
  transform: scale3d(1.1, 1.1, 1);
}
/* Show */
.uk-transition-toggle:hover .uk-transition-scale-up,
.uk-transition-toggle:focus .uk-transition-scale-up,
.uk-transition-active.uk-active .uk-transition-scale-up {
  opacity: 1;
  transform: scale3d(1.1, 1.1, 1);
}
.uk-transition-toggle:hover .uk-transition-scale-down,
.uk-transition-toggle:focus .uk-transition-scale-down,
.uk-transition-active.uk-active .uk-transition-scale-down {
  opacity: 1;
  transform: scale3d(1, 1, 1);
}
/*
 * Slide
 */
.uk-transition-slide-top {
  transform: translateY(-100%);
}
.uk-transition-slide-bottom {
  transform: translateY(100%);
}
.uk-transition-slide-left {
  transform: translateX(-100%);
}
.uk-transition-slide-right {
  transform: translateX(100%);
}
.uk-transition-slide-top-small {
  transform: translateY(-10px);
}
.uk-transition-slide-bottom-small {
  transform: translateY(10px);
}
.uk-transition-slide-left-small {
  transform: translateX(-10px);
}
.uk-transition-slide-right-small {
  transform: translateX(10px);
}
.uk-transition-slide-top-medium {
  transform: translateY(-50px);
}
.uk-transition-slide-bottom-medium {
  transform: translateY(50px);
}
.uk-transition-slide-left-medium {
  transform: translateX(-50px);
}
.uk-transition-slide-right-medium {
  transform: translateX(50px);
}
/* Show */
.uk-transition-toggle:hover [class*='uk-transition-slide'],
.uk-transition-toggle:focus [class*='uk-transition-slide'],
.uk-transition-active.uk-active [class*='uk-transition-slide'] {
  opacity: 1;
  transform: translate(0, 0);
}
/*
 * Stroke
 */
.uk-transition-stroke {
  transition-duration: 3s;
}
/* Show */
.uk-transition-stroke:hover,
.uk-transition-stroke:focus,
.uk-transition-stroke.uk-transition-active {
  opacity: 1;
  stroke-dashoffset: 0 !important;
}
/* Opacity modifier
 ========================================================================== */
.uk-transition-opaque {
  opacity: 1;
}
/* Duration modifiers
 ========================================================================== */
.uk-transition-slow {
  transition-duration: 0.7s;
}
/* ========================================================================
   Component: Visibility
 ========================================================================== */
/*
 * Hidden
 * `hidden` attribute also set here to make it stronger
 */
[hidden],
.uk-hidden {
  display: none !important;
}

/* Alignment modifiers
 ========================================================================== */
.uk-text-left {
  text-align: left !important;
}
.uk-text-right {
  text-align: right !important;
}
.uk-text-center {
  text-align: center !important;
}
.uk-text-justify {
  text-align: justify !important;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-text-left\@s {
    text-align: left !important;
  }
  .uk-text-right\@s {
    text-align: right !important;
  }
  .uk-text-center\@s {
    text-align: center !important;
  }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .uk-text-left\@m {
    text-align: left !important;
  }
  .uk-text-right\@m {
    text-align: right !important;
  }
  .uk-text-center\@m {
    text-align: center !important;
  }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
  .uk-text-left\@l {
    text-align: left !important;
  }
  .uk-text-right\@l {
    text-align: right !important;
  }
  .uk-text-center\@l {
    text-align: center !important;
  }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
  .uk-text-left\@xl {
    text-align: left !important;
  }
  .uk-text-right\@xl {
    text-align: right !important;
  }
  .uk-text-center\@xl {
    text-align: center !important;
  }
}

/* ========================================================================
   Component: Flex
 ========================================================================== */
.uk-flex {
  display: flex;
}
.uk-flex-inline {
  display: inline-flex;
}
/*
 * Remove pseudo elements created by micro clearfix as precaution
 */
.uk-flex::before,
.uk-flex::after,
.uk-flex-inline::before,
.uk-flex-inline::after {
  display: none;
}
/* Alignment
 ========================================================================== */
/*
 * Align items along the main axis of the current line of the flex container
 * Row: Horizontal
 */
.uk-flex-left {
  justify-content: flex-start;
}
.uk-flex-center {
  justify-content: center;
}
.uk-flex-right {
  justify-content: flex-end;
}
.uk-flex-between {
  justify-content: space-between;
}
.uk-flex-around {
  justify-content: space-around;
}
/* Phone landscape and bigger */
@media (min-width: 640px) {
  .uk-flex-left\@s {
    justify-content: flex-start;
  }
  .uk-flex-center\@s {
    justify-content: center;
  }
  .uk-flex-right\@s {
    justify-content: flex-end;
  }
  .uk-flex-between\@s {
    justify-content: space-between;
  }
  .uk-flex-around\@s {
    justify-content: space-around;
  }
}

/* ========================================================================
   Component: Dotnav
 ========================================================================== */

/*
 * 1. Allow items to wrap into the next line
 * 2. Reset list
 * 3. Gutter
 */
.uk-dotnav {
  display: none;
  /* 1 */
  flex-wrap: wrap;
  /* 2 */
  margin: 0;
  padding: 0;
  list-style: none;
  /* 3 */
  margin-left: -12px;
    
}
/*
 * 1. Space is allocated solely based on content dimensions: 0 0 auto
 * 2. Gutter
 */
.uk-dotnav > * {
  /* 1 */
  flex: none;
  /* 2 */
  padding-left: 12px;
}
/* Items
 ========================================================================== */
/*
 * Items
 * 1. Hide text if present
 */
.uk-dotnav > * > * {
  display: block;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  /* 1 */
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid rgba(102, 102, 102, 0.4);
  transition: 0.2s ease-in-out;
  transition-property: background-color, border-color;
}
/* Hover + Focus */
.uk-dotnav > * > :hover,
.uk-dotnav > * > :focus {
  background-color: rgba(102, 102, 102, 0.6);
  outline: none;
  border-color: transparent;
}
/* OnClick */
.uk-dotnav > * > :active {
  background-color: rgba(102, 102, 102, 0.2);
  border-color: transparent;
}
/* Active */
.uk-dotnav > .uk-active > * {
  background-color: rgba(102, 102, 102, 0.6);
  border-color: transparent;
}


/* Button (Slidenav)
 ========================================================================== */
/*
 * 1. Center icon vertically and horizontally
 */
.uk-lightbox-button {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.7);
  /* 1 */
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
/*
 * Hover
 */
.uk-lightbox-button:hover {
  color: #fff;
}

/*
svg[Attributes Style] {
    width: 20;
    height: 20;
} */

.uk-lightbox-toolbar-icon {
    padding: 5px;
    color: rgba(255, 255, 255, 0.7);
}

.uk-close {
    color: #999;
    transition: .1s ease-in-out;
    transition-property: color,opacity;
}

.uk-icon > svg > line{stroke:#000;}

.uk-icon:hover > svg > line{stroke:#009;}

.uk-icon {
    margin: 0;
    border: none;
    border-radius: 0;
    overflow: visible;
    font: inherit;
    color: inherit; 
    text-transform: none;
    padding: 0;
    background-color: transparent; 
    display: inline-block;
    fill: currentcolor; 
    line-height: 0;
}

.uk-lightbox-toolbar-icon:hover {
    color: #fff;
}


/* ========================================================================
   Component: Slidenav
 ========================================================================== */

/*
 * Adopts `uk-icon`
 */
.uk-slidenav {
  padding: 5px 10px;
    display: none;
  /* color: rgba(102, 102, 102, 0.5);*/
  transition: color 0.1s ease-in-out;
}
/* Hover + Focus */
.uk-slidenav:hover,
.uk-slidenav:focus {
  /*color: rgba(102, 102, 102, 0.9);*/
    outline: none;
}
/* OnClick */
.uk-slidenav:active {
  /*color: rgba(102, 102, 102, 0.5);*/
}

.uk-slidenav > svg > polyline{stroke:rgba(102, 102, 102, 0.5);}

.uk-slidenav:hover > svg > polyline{stroke:rgba(102, 102, 102, 0.9);}

/* ========================================================================
   Component: Nav
 ========================================================================== */
/*
 * Reset
 * 1. Prepare lists
 * 2. Prepare links
 * 3. Remove default focus style
 */
/* 1 */
.uk-nav,
.uk-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 2 */
.uk-nav li > a {
  display: block;
  text-decoration: none;
}
/* 3 */
.uk-nav li > a:focus {
  outline: none;
}
/*
 * Items
 * Must target `a` elements to exclude other elements (e.g. lists)
 */
.uk-nav > li > a {
  padding: 5px 0;
}

/* Toggle (Hover + Focus)
 ========================================================================== */
/*
 * Hidden
 * 1. The toggle is triggered on touch devices using `:focus` and tabindex
 * 2. The target stays visible if any element within receives focus through keyboard
 *    Doesn't work in Edge, yet.
 * 3. Can't use `display: none` nor `visibility: hidden` because both are not focusable.
 *
 */
/* 1 + 2 */
.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) {
  /* 3 */
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
/*
 * Invisible
 */
/* 1 + 2 */
.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) {
  /* 3 */
  opacity: 0 !important;
}
/*
 * 1. Prevent tab highlighting on iOS.
 */
.uk-visible-toggle {
  /* 1 */
  -webkit-tap-highlight-color: transparent;
}
/*
 * Remove outline for `tabindex`
 */
.uk-visible-toggle:focus {
  outline: none;
}

/* ========================================================================
   Component: Margin
 ========================================================================== */
/*
 * Default
 */
.uk-margin {
  margin-bottom: 20px;
}
* + .uk-margin {
  margin-top: 20px !important;
}
.uk-margin-top {
  margin-top: 20px !important;
}
.uk-margin-bottom {
  margin-bottom: 20px !important;
}
.uk-margin-left {
  margin-left: 20px !important;
}
.uk-margin-right {
  margin-right: 20px !important;
}

/*--------------------------------------------------------------
ABOUT-US page
--------------------------------------------------------------*/
.aboutImagePos1, .aboutImagePos2{
    height: inherit;
    display: inline-block;
    width: 23%;   
}

.aboutImagePos1{margin: 7% 8% 12% 8%;}
.aboutImagePos2{margin: 7% 13% 12% 20%;}

.aboutImage1 {background: url(img/craigPic.png) no-repeat 50% 0%;}
.aboutImage2 {background: url(img/ritaPic.png) no-repeat 50% 0%;}

.aboutImage1, .aboutImage2{
    background-size: cover;
    -webkit-mask-size: cover;
    width: 100%;
    padding-top: 100%;    
}

.about-us > h2,.about-us p, .contact-us > h2, .contact-us p{margin: 10px 9%;}

.about-us h2, .contact-us h2{font-size: 5vw;}
.about-us p, .contact-us p{font-size: 3.5vw;font-weight: 200;}

.about-us h2:nth-of-type(2){text-align: center;}

/*---------------------  LAZY LOADING  ---------------------------- */

#one, #two, #three, .position4 {
    width: 93%;
    margin: 6% 0 12% 4%;
    padding: 12px;
}

#object-one{width: 300px;height: 200px;opacity: 0;}

/*
.one-active{
    background: url('img/Asset-2.png') 100% 0;
    background-size: 100%;
    opacity: 0;
    background-position: 0;
} */


.one-active, .two-active, .three-active{
    animation: slideUp 2s .3s forwards;
    -webkit-animation: slideUp 2s .3s forwards;

}

@keyframes slideUp {
    0% {
        opacity: .0;
        -webkit-transform: translateY(10%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

@-webkit-keyframes slideUp {
    0% {
        opacity: .0;
        -webkit-transform: translateY(10%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}


/*--------------------------------------------------------------
CONTACT-US page
--------------------------------------------------------------*/
label{position: relative}

form{margin-left: 4%;}

#wpcf7-f41-o1 > form > p:nth-child(2) > label > span{
    color:#836F76;
    letter-spacing: 2px;
    padding: 19px 0 16px 0;
    text-transform: uppercase;
}

input, textarea{
    color:#836F76;
    letter-spacing: 2px;
    padding: 19px 0 16px 20px;
    border: 1px solid #836F76;
}

.wpcf7-form p:nth-of-type(1), .wpcf7-form p:nth-of-type(2){
    display: inline-block;
    width: 44%;
    margin: 10px 2% 16px 0;
}

.wpcf7-form p:nth-last-of-type(2){
    width: 90%;
    margin: 16px 0 16px 0;
}

.your-name input, .your-email input{
    width: 100%;
}

textarea{
    width: 100%;
    resize: none;
}

.wpcf7-form p:nth-last-of-type(1) {
    width: 30%;
    min-width: 156px;
}

.wpcf7-form p:nth-last-of-type(1) input{
    width: 100%;
    border-color: #836F76;
    border-width: 1px;
    border-style: solid;
    color: #836F76;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 19px 14px 16px 14px;
    margin-bottom: 40px;
    background-color: #ffffff;
    -webkit-transition: background-color 0.4s ease;
    -moz-transition: background-color 0.4s ease;
    -o-transition: background-color 0.4s ease;
    -ms-transition: background-color 0.4s ease;
    transition: background-color .4s ease;

}

.wpcf7-form p:nth-last-of-type(1):hover input{
    background-color: #F26C66;
    color: #fff;
}

.wpcf7-not-valid-tip{
    position: absolute;
    top: -40px;
}

#wpcf7-f25-p13-o1 > form > p:nth-child(5){margin-left:0;}

/*--------------------------------------------------------------
FOOTER
--------------------------------------------------------------*/


.footerLogo{
    display: none;
    float: left;
    width:270px;
    height: 100px;
    background-image: url("img/logo_1080.png");
    background-repeat: no-repeat;
    background-size:contain;
    background-position: bottom center;
    margin: 30px 0 0 7%;
}

.maskContainer{
    float: right;
    cursor: pointer;
    width: 11vw;
    margin-top: 5%;
}

footer > div:nth-child(2){margin-right:22%;margin-left: 31%;}


footer div:last-of-type{clear: both;}

footer .hecho, footer .hecho:visited, .tubeIcon, .tubeIcon:visited{color: #26387E;}
footer .hecho{
    clear: both;
    float: right;
    text-align: center;
    font-size: 2.4vw;
    padding-right:calc(50% - 17vw);
    padding-top: 25px;
    padding-bottom: 30px;
    -webkit-transition: color 0.4s ease;
    -moz-transition: color 0.4s ease;
    -o-transition: color 0.4s ease;
    -ms-transition: color 0.4s ease;
    transition: color .4s ease;
}

footer .hecho:hover, .tubeIcon:hover{color: #F26C66;}
            
.tubeIcon{
    font-family: FontAwesome;
    display: inline;
    text-align: center;
    font-size: 10vw;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    transition: color .3s ease;
}


/*--------------------------------------------------------------
Media queries
--------------------------------------------------------------*/

/*---- TABLET ---- */
@media (min-width: 784px) {
    .container{width: 768px; margin:auto;}

    .backgroundImage img{width: 768px; margin-left:calc(50% - 384px);}

    #mobile-nav {
        top: 30px;
        right:calc(50% - 348px);
    }

    #mobile-nav div {
        width: 93px;
        height: 11px;
        margin: 11px 0;
    }
    
    .nav-headings2{display: block;}
    .dropbtn {display: none;}

    header img {
        margin: 8px auto 3% auto;
        width: 400px;
    }
    
    .uk-slidenav{display: block;}
    .uk-dotnav {display: flex;}

    .home > div > .whiteB{margin: 80px auto 0 auto;}
    
    .redCircle{
        width: 100px;
        height: 100px;
        top: 530px;
        left: -40px;
    }

    .pinkMoon{
        width: 121px;
        height: 110px;
        top: -21px;
        right: -40px;
    }

    .yellowShape{
        width: 100px;
        height: 100px;
        top: 356px;
        left: -40px;
    }

    .pinkShape2{
        width: 130px;
        height: 130px;
        top: 270px;
        left: -80px;
    }

    .yellowShape2{
        width: 130px;
        height: 130px;
        bottom: 52%;
        left: -93px;
    }

    .greyMoon{
        width: 150px;
        height: 160px;
        top: 24%;
        right: -120px;
    }

    .pinkShape{
        width: 150px;
        height: 120px;
        bottom: 20%;
        right: -60px;
    }

    .greyShape{
        width: 100px;
        height: 100px;
        bottom: 90px;
        left: -60px;
    }

    .mainT {font-size: 7.6em;}
    .mainT2 {font-size: 2.6em;}

    .container > div > h1:nth-child(1) {
        padding-top: 58px;
    }

    .whatWeDo > h1:nth-child(1) {
        font-size: 5.5em;
        padding-top: 142px;
    }

    .whatWeDo h3 {
        font-size: 1.9em;
    }
    
    .uk-lightbox-toolbar {font-size: 1.8em;}

    .overlayText{font-size: 2.3em;}

    .view{font-size: 1.3em;}

    .skills div > h1 {
        font-size: 3.7em;
        padding-top: 100px;
    }

    .skills div > h2:nth-child(2) {
        font-size: 1.6em;
    }

    .skills > span img {
        width: 412px;
        margin: 40px 0 130px 170px;
    }

    .infoBlock > h2:nth-child(1) {
        font-size: 2.5em;
        padding: 60px 100px 69px 61px;
    }

    .infoBlock > h2:nth-child(2) {
        font-size: 2.2em;
        padding-bottom: 22px;
    }

    .portfolio .portfolioContainer, .portfolio .portfolioContainer2{
        /* display: inline-block; */
        float: left;
        width: 43%;
        margin: 20px 0 30px 6%;
    }
    
    .footerLogo{display: block;}

    footer > div:nth-child(2){margin-right:54px;margin-left: 60px;}

    footer .hecho{font-size: 0.8em;padding-right: 33px;}
    
    .maskContainer{
        float: right;
        width: 45px;
        margin-top: 60px;
    }

    .skills div:last-of-type {
        clear: both;
        height: 150px;
        margin-bottom: 10px;
    }

    .about-us h2, .contact-us h2{font-size: 1.8em}
    .about-us p, .contact-us p{font-size: 1.3em}
    
    .about-us > h2, .about-us p, .contact-us > h2, .contact-us > p {margin: 10px 60px;}
    
    .modal-content {padding-top: 104px;}
    .numbertext {font-size: 31px;padding: 30px 0 0 20px;} 
    .close {padding: 0 15px;top: 26px;right: 5%;font-size: 38px;}
    .prev, .next {padding: 16px;font-size: 60px;}
    .formBox1 {font-size: 1.4em;}
    .contact-link h2{font-size: 3em; padding: 0 0 30px 61px;}
    
    .aboutImagePos1, .aboutImagePos2{ width: 19%;}
    .aboutImagePos1 {margin: 7% 8% 12% 8%;}
    .aboutImagePos2 {margin:7% 13% 12% 20%;}
    
    .tubeIcon{font-size: 5.2em;}
}


/*---- DESKTOP ---- */
@media (min-width: 1042px) {

    header img {margin: 12px auto 34px auto;}

    .container{width: 1024px; margin:auto;}

    #mobile-nav{display:none;}

    #desktopMenu{display: block;}

    .mainT {font-size: 6em;}
    .mainT2 {font-size: 2.7em;}

    .portfolioContainer, .portfolioContainer2{
        width: 30%;
    }

    .image, .overlayImage {
        width: 100%;
        height:auto;
    }

    .overlayText{font-size: 2em;width: 100%;}

    .whatWeDo .portfolioContainer:nth-child(2), .whatWeDo .portfolioContainer:nth-child(3), .whatWeDo .portfolioContainer:nth-child(4), .whatWeDo .portfolioContainer:nth-child(5), .whatWeDo .portfolioContainer:nth-child(6){
        display: inline-block;
            width: 30%;
    }

    .skills div:first-of-type{ 
        width: 44%;
        display:inline-block;
        margin-bottom: 40px;
    }

    .skills > span img {
        width: 42%;
        margin: 0 10px 0 100px;
        display:inline-block;
    }

    .skills div > h1 {
        font-size: 2.5em;
        padding-top: 80px;
    }

    .skills div > h2:nth-child(2) {
        font-size: 1.6em;
        padding-top: 30px;
    }

    .whatWeDo > h2{
        font-size: 1em;
        margin: 90px 345px;
        padding: 30px;
    }

    .skills div > h2:nth-child(3) {
        font-size: 1em;
        margin: 90px 117px;
        padding: 30px;
    }

    .infoBlock{
        float:left;
        width: 48%;
        margin: 0 auto;
    }

    .infoBlock > h2:nth-child(1) {
        font-size: 2.5em;
        padding: 32px 20px 62px 70px;
    }
    
    .contact-link h2{padding: 0 0 21px 70px;}

    .sandles{
        padding-top: 497px;
        margin-left: 2%;
    }

    footer > div:nth-child(2){margin-right:80px;margin-left: 70px;}
    
    footer .hecho{padding-right: 64px;}
    
    .greyMoon{top: 80%;right: -130px;}

    .pinkShape{bottom: 20%;right: -60px;}

    .yellowShape2{bottom: 42%;left: -123px;}
    
    .portfolio .portfolioContainer, .portfolio .portfolioContainer2{
        width: 25%;
    }

}
/*
@media (min-width: 1266px) {
    .container{overflow-x:visible;}
}*/

/* --- media queries ----- end */