* {
   font-family: 'Gentium Basic', serif;
   margin: 0;
   padding: 0;
}

body {}

header {
   background-image: url(../images/cloud-header.jpg);
   background-repeat: repeat;
   background-size: auto;
   background-position: center center;
   background-color: #01b3fd;
}

@media (max-width: 576px) {
   header {
      background-image: url(../images/cloud-header-mobile.jpg);
   }
}

.pt-10 {
   padding-top: 10px !important;
}

.pt-20 {
   padding-top: 20px !important;
}

.pt-30 {
   padding-top: 30px !important;
}

.pt-40 {
   padding-top: 40px !important;
}

.pt-50 {
   padding-top: 50px !important;
}

.mt-0 {
   margin-top: 0 !important;
}

.mt-10 {
   margin-top: 10px !important;
}

.mt-20 {
   margin-top: 20px !important;
}

.mt-30 {
   margin-top: 30px !important;
}

.mt-40 {
   margin-top: 40px !important;
}

.mt-50 {
   margin-top: 50px !important;
}

.mt-60 {
   margin-top: 50px !important;
}

.mt-50 {
   margin-top: 60px !important;
}

.mt-70 {
   margin-top: 70px !important;
}

.mt-80 {
   margin-top: 80px !important;
}

.mt-90 {
   margin-top: 90px !important;
}

.mt-100 {
   margin-top: 100px !important;
}

.pl-10 {
   padding-left: 10px !important;
}

.pl-20 {
   padding-left: 10px !important;
}

.pl-30 {
   padding-left: 30px !important;
}

.pl-40 {
   padding-left: 40px !important;
}

.pr-10 {
   padding-right: 10px !important;
}

.pr-20 {
   padding-right: 20px !important;
}

.pr-30 {
   padding-right: 30px !important;
}

.pr-40 {
   padding-right: 40px !important;
}

@media (min-width: 576px) {
   .pt-sm-10 {
      padding-top: 10px !important;
   }
   .pt-sm-20 {
      padding-top: 20px !important;
   }
   .pt-sm-30 {
      padding-top: 30px !important;
   }
   .pt-sm-40 {
      padding-top: 40px !important;
   }
   .pt-sm-50 {
      padding-top: 50px !important;
   }
   .mt-sm-10 {
      margin-top: 10px !important;
   }
   .mt-sm-20 {
      margin-top: 20px !important;
   }
   .mt-sm-30 {
      margin-top: 30px !important;
   }
   .mt-sm-40 {
      margin-top: 40px !important;
   }
   .mt-sm-50 {
      margin-top: 50px !important;
   }
   .mt-sm-60 {
      margin-top: 50px !important;
   }
   .mt-sm-50 {
      margin-top: 60px !important;
   }
   .mt-sm-70 {
      margin-top: 70px !important;
   }
   .mt-sm-80 {
      margin-top: 80px !important;
   }
   .mt-sm-90 {
      margin-top: 90px !important;
   }
   .mt-sm-100 {
      margin-top: 100px !important;
   }
}

@media (min-width: 768px) {
   .pt-md-10 {
      padding-top: 10px !important;
   }
   .pt-md-20 {
      padding-top: 20px !important;
   }
   .pt-md-30 {
      padding-top: 30px !important;
   }
   .pt-md-40 {
      padding-top: 40px !important;
   }
   .pt-md-50 {
      padding-top: 50px !important;
   }
   .pt-md-150 {
      padding-top: 150px !important;
   }
   .pb-md-10 {
      padding-bottom: 10px !important;
   }
   .pb-md-20 {
      padding-bottom: 20px !important;
   }
   .pb-md-30 {
      padding-bottom: 30px !important;
   }
   .pb-md-40 {
      padding-bottom: 40px !important;
   }
   .pb-md-50 {
      padding-bottom: 50px !important;
   }
   .mt-md-10 {
      margin-top: 10px !important;
   }
   .mt-md-20 {
      margin-top: 20px !important;
   }
   .mt-md-30 {
      margin-top: 30px !important;
   }
   .mt-md-40 {
      margin-top: 40px !important;
   }
   .mt-md-50 {
      margin-top: 50px !important;
   }
   .mt-md-60 {
      margin-top: 50px !important;
   }
   .mt-md-50 {
      margin-top: 60px !important;
   }
   .mt-md-70 {
      margin-top: 70px !important;
   }
   .mt-md-80 {
      margin-top: 80px !important;
   }
   .mt-md-90 {
      margin-top: 90px !important;
   }
   .mt-md-100 {
      margin-top: 100px !important;
   }
   .mb-mb-10 {
      margin-bottom: 10px !important;
   }
   .mb-md-20 {
      margin-bottom: 20px !important;
   }
   .mb-md-30 {
      margin-bottom: 30px !important;
   }
   .mb-md-40 {
      margin-bottom: 40px !important;
   }
   .mb-md-50 {
      margin-bottom: 50px !important;
   }
}

@media (min-width: 992px) {
   .pt-lg-10 {
      padding-top: 10px !important;
   }
   .pt-lg-20 {
      padding-top: 20px !important;
   }
   .pt-lg-30 {
      padding-top: 30px !important;
   }
   .pt-lg-40 {
      padding-top: 40px !important;
   }
   .pt-md-50 {
      padding-top: 50px !important;
   }
   .mt-lg-10 {
      margin-top: 10px !important;
   }
   .mt-lg-20 {
      margin-top: 20px !important;
   }
   .mt-lg-30 {
      margin-top: 30px !important;
   }
   .mt-lg-40 {
      margin-top: 40px !important;
   }
   .mt-lg-50 {
      margin-top: 50px !important;
   }
   .mt-lg-60 {
      margin-top: 50px !important;
   }
   .mt-lg-50 {
      margin-top: 60px !important;
   }
   .mt-lg-70 {
      margin-top: 70px !important;
   }
   .mt-lg-80 {
      margin-top: 80px !important;
   }
   .mt-lg-90 {
      margin-top: 90px !important;
   }
   .mt-lg-100 {
      margin-top: 100px !important;
   }
}

@media (min-width: 1200px) {
   .pt-xl-10 {
      padding-top: 10px !important;
   }
   .pt-xl-20 {
      padding-top: 20px !important;
   }
}

.logo,
.intro,
.menu,
.content {
   padding: 10px;
}

body#home a#homenav,
body#services a#servicesnav,
body#ourwork a#ourworknav,
body#ourteam a#ourteamnav,
body#contact a#contactnav {
   color: #25aae1;
}

body p {
   font-family: 'Gentium Basic', serif;
   font-size: 20px;
}

h1 {
   font-family: 'Gentium Basic', serif;
   font-size: 24px;
   line-height: 140%;
   color: #ffffff;
   font-style: italic;
}

@media only screen and (max-width: 767px) {
   h1 {
      font-size: 17px !important;
   }
   h2 {
      font-size: 36px !important;
   }
   h3 {
      font-size: 32px !important;
   }
   body p {
      font-size: 19px !important;
   }
   .footer-text p {
      font-size: 18px !important;
   }
}

h2 {
   font-family: 'Flavors', cursive;
   font-size: 65px;
   color: #023d52;
}

h3 {
   font-family: 'Mouse Memoirs', sans-serif;
   font-size: 44px;
   color: #597601;
}

h4 {
   font-family: 'Gentium Basic', serif;
   font-size: 20px;
   font-weight: 600;
   color: #ff7f26;
}

h5 {
   font-family: 'Gentium Basic', serif;
   font-size: 15px;
   color: #0871b6;
   line-height: 140%;
   font-weight: 500;
}

a {
   font-family: 'Gentium Basic', serif;
   color: #0871b6;
   text-decoration: none;
}

a:visited {
   color: #0871b6;
   text-decoration: none;
}

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

main img {
   width: 100%;
}

article p {
   padding-top: 4px;
   padding-bottom: 4px;
   line-height: 155%;
}

article img {
   padding-top: 30px;
   padding-bottom: 20px;
}

section img {
   width: 100%;
}

.btn {
   vertical-align: middle;
   padding: 6px 36px;
   transition: color .2s, right .2s .1s, left .2s .1s;
   -moz-transition: color .2s, right .2s .1s, left .2s .1s;
   -webkit-transition: color .2s, right .2s .1s, left .2s .1s;
}

.btn-prm-plt-1,
.btn-prm-plt-1:visited {
   background-color: #ff7f26;
   border: 2px solid #ff7f26;
   color: #ffffff;
}

.btn-prm-plt-1 a {
   color: #ffffff;
}

.btn-prm-plt-1 a:hover {
   color: #ff7f26;
   f
}

.btn-prm-plt-1:hover,
.btn-prm-plt-1:active,
.btn-prm-plt-1:focus {
   background-color: transparent;
   color: #ff7f26;
   text-decoration: none;
}

input,
textarea {
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
   color: #023d52;
   background-color: #d6f7ff;
   border: 1px dashed #999999;
   border-radius: 2px;
   width: 60%;
}

.comment-button button {
   color: #ffffff;
   background-color: #d65121;
   padding-left: 10px;
   padding-right: 10px;
   border: 1px solid transparent;
   border-radius: 4px;
}

.comment-button button:hover {
   color: #ffffff;
   background-color: #737573;
}

footer {
   background-image: url(../images/wave.jpg);
   background-repeat: repeat-x;
   background-position: center;
}

.footer-text p {
   font-family: 'Gentium Basic', serif;
   color: #000000;
   font-size: 18px;
}

.footer-text ul {
   padding-left: 18px;
}

.footer-text li {
   list-style: disc;
   line-height: 190%;
}

.footer-text li a {
   font-family: 'Gentium Basic', serif;
   color: #000000;
   font-size: 15px;
}

.footer-text a {
   font-family: 'Gentium Basic', serif;
   color: #597601;
   text-decoration: none;
}

.footer-text a:visited {
   color: #000000;
   text-decoration: none;
}

.footer-text a:hover {
   color: #597601;
   text-decoration: underline;
}

.navbar-nav>li>a {
   font-family: 'Gentium Basic', serif;
   font-size: 20px;
   font-weight: 600;
}

.nav>li>a {
   padding-left: 0;
   padding-right: 65px;
   padding-top: 20px;
}

li {
   font-family: 'Gentium Basic', serif;
   font-size: 18px;
   margin-left: 20px;
}

figcaption {
   font-family: 'Gentium Basic', serif;
   font-size: 13px;
   font-weight: 400;
   color: #ffffff;
}

strong {
   font-family: 'Gentium Basic', serif;
   font-weight: 600;
}

em {
   font-family: 'Gentium Basic', serif;
}

.menu {
   background-image: url(../images/yellow-tile.jpg);
   background-repeat: repeat-x;
   width: 100%;
   position: relative;
   z-index: 999;
}

.menu a {}

.menu a:hover {
   color: #63991d;
   text-decoration: underline;
}

.menu a:visited {
   color: #0000FF;
}

.copyright {
   text-align: center;
}

@media (min-width: 768px) and (max-width: 991px) {
   .navbar {
      position: relative;
      min-height: 35px;
      margin-bottom: 5px;
      border: 1px solid transparent;
   }
}

@media (max-width: 768px) {
   .navbar {
      position: relative;
      min-height: 0;
      margin-bottom: 0;
      border: 1px solid transparent;
   }
   .navbar-default .navbar-nav>li>a {
      color: #023d52;
      padding-bottom: 10px;
      font-size: 16px;
   }
   header {
      border-bottom: none;
   }
   .copyright {
      text-align: left;
   }
}

.f-left {
   float: left;
}

.f-right {
   float: right;
}

.clear-left {
   clear: left;
}

.content {
   margin-top: 10px;
}

.menu-padding {
   padding-top: 40px;
}

.content p {
   margin-bottom: 20px;
}

.sticky {
   position: fixed;
   top: 0;
}

smaller {
   font-size: 14px;
}

.text-white {
   color: #ffffff;
}

.light-gray {
   color: #767676;
}

.bg-black {
   background-color: #000000;
}

.bg-gray {
   background-color: #3f3e3f;
}

.font-small {
   font-size: 13px;
}

.white {
   color: #ffffff;
}

.gray {
   color: #cccccc;
}

.line {
   border-bottom: 0.2727em dotted #cccccc;
   margin-bottom: 10px;
   width: 85%;
   padding-top: 5px;
}

.line-sponsor {
   border-bottom: 0.2727em dotted #cccccc;
   margin-bottom: 10px;
   width: 100%;
}

.red-text {
   font-size: 16px;
   color: #e85049;
   font-family: Varela Roundregular;
}

.pt-5 {
   padding-top: 5px;
}

.pt-10 {
   padding-top: 10px;
}

.pt-15 {
   padding-top: 15px;
}

.pt-20 {
   padding-top: 20px;
}

.pt-25 {
   padding-top: 25px;
}

.pt-30 {
   padding-top: 30px;
}

.pt-50 {
   padding-top: 50px;
}

.pt-100 {
   padding-top: 100px;
}

.pt-130 {
   padding-top: 130px;
}

.pb-10 {
   padding-bottom: 10px;
}

.pb-15 {
   padding-bottom: 15px;
}

.pb-20 {
   padding-bottom: 20px;
}

.pb-30 {
   padding-bottom: 30px;
}

.pb-40 {
   padding-bottom: 40px;
}

.pb-50 {
   padding-bottom: 50px;
}

.padding-bottom-100 {
   padding-bottom: 100px;
}

.padding-top-50-25 {
   padding-top: 50px;
}

.padding-top-30-0 {
   padding-top: 30px;
}

.padding-bottom-100-25 {
   padding-bottom: 100px;
}

.padding-top-45 {
   padding-top: 45px;
}

.padding-top-50-15 {
   padding-top: 50px;
}

.padding-left-10 {
   padding-left: 10px;
}

.padding-left-20 {
   padding-left: 20px;
}

.padding-left-30 {
   padding-left: 30px;
}

.padding-right-20 {
   padding-right: 20px;
}

.padding-right-30 {
   padding-right: 30px;
}

.mb-20 {
   margin-bottom: 20px;
}

.mb-30 {
   margin-bottom: 30px;
}

.mb-40 {
   margin-bottom: 40px;
}

.mb-50 {
   margin-bottom: 50px;
}

.mb-100 {
   margin-bottom: 100px;
}

.breadcrumb {
   font-family: 'Gentium Basic', serif;
   font-size: 14px;
   font-weight: 400;
   color: #888888;
}

.project-title {
   font-size: 17px;
   color: #000000;
   font-family: Varela Roundbold;
}

hr {
   display: block;
   height: 10px;
   border: 0;
   border-top: 1px dotted #625a5a;
   margin: 1em 0;
   padding: 0;
}

.view-more {
   color: #e85049;
}

.view-more a {
   color: #e85049;
}

.view-more a:hover {
   text-decoration: underline;
}

.view-more a:visited {
   color: #e85049;
}

.text-white {
   color: #ffffff;
}

.item-list ul {
   padding-right: 30px !important;
}

.item-list li {
   margin-left: 20px;
   line-height: 190%;
}

.item-list li a {
   font-family: 'Gentium Basic', serif;
   font-size: 15px;
}

a img {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

a img:hover {
   opacity: 0.8;
}

.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

.fade:hover {
   opacity: 0.7;
}

.footer-text {
   font-family: 'Gentium Basic', serif;
   font-size: 13px;
   font-weight: 400;
}

.box-shadow {}

.about-caption {
   font-family: Varela Roundregular;
   font-size: 16px;
   color: #444444;
   padding-top: 10px;
}

.blue-bg {
   background-color: #00aed8;
   padding: 15px;
}

.blue-bg p {
   font-family: Varela Roundregular;
   font-size: 15px;
   color: #ffffff;
}

.gray-bg {
   background-color: #e1e7e4;
   padding: 15px;
}

.gray-bg p {
   font-family: Varela Roundregular;
   font-size: 15px;
   color: #28241b;
}


/*Hamburger menu*/

.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
   background-color: transparent;
}

.navbar-default .navbar-toggle {
   border: none;
}

.navbar-toggle span.icon-bar {
   transition: all 0.15s;
}

.navbar-toggle span:nth-child(2) {
   transform: rotate(45deg);
   transform-origin: 10% 10%;
}

.navbar-toggle span:nth-child(3) {
   opacity: 0;
}

.navbar-toggle span:nth-child(4) {
   transform: rotate(-45deg);
   transform-origin: 10% 90%;
}

.navbar-toggle.collapsed span:nth-child(2),
.navbar-toggle.collapsed span:nth-child(4) {
   transform: rotate(0);
}

.navbar-toggle.collapsed span:nth-child(3) {
   opacity: 1;
}

.btn-2 {
   display: inline-block;
   padding: 12px 22px;
   margin-bottom: 0;
   font-size: 14px;
   line-height: 1.42857143;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   -ms-touch-action: manipulation;
   touch-action: manipulation;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   border: none;
   background-color: #e1e7e4;
   font-family: Varela Roundregular;
   color: #28241b;
   text-transform: uppercase;
   border: 2px solid #28241b;
}

.btn-2:focus,
.btn-2:active:focus,
.btn-2.active:focus,
.btn-2.focus,
.btn-2:active.focus,
.btn-2.active.focus {
   outline: thin dotted;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
}

.btn-2:hover,
.btn-2:focus,
.btn-2.focus {
   color: #25aae1;
   text-decoration: none;
   border: 2px solid #25aae1;
}

.btn-2:active,
.btn-2.active {
   background-image: none;
   outline: 0;
   -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

.comments img {
   width: auto;
   max-width: 50px;
}

.comments ul {
   list-style: none;
}


/*Comment form*/

label {
   display: inline-block;
   max-width: 100%;
   margin-bottom: 5px;
   font-family: 'Gentium Basic', serif;
   color: #6f6f6f;
   font-size: 16px;
   font-weight: 400;
}

.form-wrapper input {
   font-family: 'Gentium Basic', serif;
   font-size: 15px;
   height: 40px;
   font-weight: 400;
   color: #6f6f6f;
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 10px;
   padding-right: 10px;
   border: 1px dotted #999999;
   border-radius: 3px 0 0 3px;
   margin-bottom: 10px;
}

.form-wrapper button {
   overflow: visible;
   font-family: 'Gentium Basic', serif;
   font-size: 15px;
   height: 40px;
   padding-top: 10px;
   padding-right: 10px;
   padding-bottom: 10px;
   border: 0;
   cursor: pointer;
   font-weight: bold;
   color: #fff;
   background: #d45027;
   -moz-border-radius: 0 3px 3px 0;
   -webkit-border-radius: 0 3px 3px 0;
   border-radius: 0 3px 3px 0;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
   margin-bottom: 10px;
}

.wpcf7-submit {
   color: #fff;
   background: #c9695d;
   -moz-border-radius: 3px 3px 3px 3px;
   -webkit-border-radius: 3px 3px 3px 3px;
   border-radius: 3px 3px 3px 3px;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
   font-family: 'Gentium Basic', serif;
   font-size: 16px;
   height: 45px;
   padding-top: 11px;
   padding-right: 25px;
   padding-bottom: 11px;
   padding-left: 25px;
   border: 0;
}

.wpcf7-response-output {
   font-family: 'Varela Round', serif !important;
   ;
   font-size: 16px;
   font-weight: 400;
   color: #c9695d;
}

.wpcf7-mail-sent-ok {
   font-family: 'Varela Round', serif !important;
   ;
   font-size: 16px;
   font-weight: 400;
   color: #c9695d;
}

div.wpcf7-mail-sent-ok {
   border: 2px solid #c9695d !important;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
@media (max-width: 767px) {
   .regular-text {
      text-align: left;
   }
   .smaller-text {
      text-align: left;
   }
   .smaller-text a {
      text-align: left;
   }
   .navbar {
      border-bottom: #dcdcdc 1px solid;
   }
   .menu {
      background-image: url(../images/atelier-manila-logo.png);
      background-color: #dcdcdc;
      height: 55px;
      padding-top: 0px;
   }
   .padding-top-50-15 {
      padding-top: 15px;
   }
   .padding-bottom-100-25 {
      padding-bottom: 25px;
   }
   .padding-top-30-0 {
      padding-top: 0;
   }
}

.logo-padding {
   padding-left: 20px;
   padding-right: 20px;
}


/* Large Devices, Wide Screens */

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


/* Medium Devices, Desktops */

@media only screen and (max-width: 992px) {
   .nav>li>a {
      padding-top: 7px;
   }
}

.stage {
   display: flex;
   height: 330px;
   width: 100%;
}

.box {
   align-self: flex-end;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   height: 230px;
   margin: 0 auto 0 auto;
   transform-origin: bottom;
}

.bounce-1 {
   animation-name: bounce-1;
   animation-timing-function: linear;
}

.bounce-2 {
   animation-name: bounce-2;
   animation-timing-function: animation-timing-function: ease-out;
}

@keyframes bounce-1 {
   0% {
      transform: translateY(0);
   }
   50% {
      transform: translateY(-100px);
   }
   100% {
      transform: translateY(0);
   }
}

@keyframes bounce-2 {
   0% {
      transform: translateY(0);
   }
   50% {
      transform: translateX(-100px);
   }
   100% {
      transform: translateY(0);
   }
}

@-webkit-keyframes swing {
   15% {
      -webkit-transform: translateX(5px);
      transform: translateX(5px);
   }
   30% {
      -webkit-transform: translateX(-5px);
      transform: translateX(-5px);
   }
   50% {
      -webkit-transform: translateX(3px);
      transform: translateX(3px);
   }
   65% {
      -webkit-transform: translateX(-3px);
      transform: translateX(-3px);
   }
   80% {
      -webkit-transform: translateX(2px);
      transform: translateX(2px);
   }
   100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
   }
}

@keyframes swing {
   15% {
      -webkit-transform: translateX(5px);
      transform: translateX(5px);
   }
   30% {
      -webkit-transform: translateX(-5px);
      transform: translateX(-5px);
   }
   50% {
      -webkit-transform: translateX(3px);
      transform: translateX(3px);
   }
   65% {
      -webkit-transform: translateX(-3px);
      transform: translateX(-3px);
   }
   80% {
      -webkit-transform: translateX(2px);
      transform: translateX(2px);
   }
   100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
   }
}

.swing:hover {
   -webkit-animation: swing 1s ease;
   animation: swing 1s ease;
   -webkit-animation-iteration-count: 1;
   animation-iteration-count: 1;
}