@import url(https://fonts.googleapis.com/css?family=Open+Sans);
.btn { display: inline-block; *display: inline; *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; font-size: 13px; line-height: 18px; color: #163953; text-align: center;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; background-color: #163953; background-image: -moz-linear-gradient(top, #163953, #163953); background-image: -ms-linear-gradient(top, #163953, #163953); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#163953), to(#163953)); background-image: -webkit-linear-gradient(top, #163953, #163953); background-image: -o-linear-gradient(top, #163953, #163953); background-image: linear-gradient(top, #163953, #163953); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#163953, endColorstr=#163953, GradientType=0); border-color: #e6e6e6 #e6e6e6 #e6e6e6; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border: 1px solid #e6e6e6; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(22, 57, 83, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(22, 57, 83, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(22, 57, 83, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); cursor: pointer; *margin-left: .3em; }
.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { background-color: #163953; }
.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; }
.btn-primary, .btn-primary:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; }
.btn-primary.active { color: rgba(255, 255, 255, 0.75); }
.btn-primary { background-color: #AB2B83; background-image: -moz-linear-gradient(top, #6eb6de, #AB2B83); background-image: -ms-linear-gradient(top, #6eb6de, #AB2B83); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#792399), to(#AB2B83)); background-image: -webkit-linear-gradient(top, #EA369B, #AB2B83); background-image: -o-linear-gradient(top, #6eb6de, #5AB2B83); background-image: linear-gradient(top, #5D067E, #4a77d4); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#6eb6de, endColorstr=#4a77d4, GradientType=0);  border: 1px solid #3762bc; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5); }
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { filter: none; background-color: #792399; }
.btn-block { width: 100%; display:block; margin-bottom:20px; }

* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }

html { width: 100%; height:100%; overflow:auto; }

body {
	height: auto;
	font-family: 'Open Sans', sans-serif;
    background-color: #FFFFFF;
}
/* ----------------------------------------------------- NAVBAR ---------------------------------------------------- */

header a, header a:hover {
    text-decoration: none;
    color: white;
}
header {
    padding: 0 20px;
    background-color: #1d1f1d;
    height: 50px;
    display: flex;
    justify-content: space-between;
}
#brand {
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
}
#brand a {
    color: white;
}
ul {
    list-style: none;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
ul a {
    color: white;
}
ul li {
    padding: 5px;
    margin-left: 10px;
}

ul li:hover {
    transform: scale(1.1);
    transition: 0.3s;
}
#login, #signup {
    border-radius: 5px;
    padding: 5px, 8px;
}
#login {
    border: 1px solid #498afb;
}
#signup {
    border: 1px solid #ff3860;
}
#login a {
    color: #498afb;
}
#signup a {
    color: #ff3860;
}
#hamburger-icon {
    margin: auto 0;
    display: none;
    cursor: pointer;
    z-index: 999;
}
#hamburger-icon div {
    width: 35px;
    height: 3px;
    background-color: white;
    margin: 6px 0;
    transition: 0.4s;
}
.open .bar1 {
    -webkit-transform: rotate(-45deg) translate(-6px, 6px);
    transform: rotate(-45deg) translate(-6px, 6px);
}
.open .bar2 {
    opacity: 0;
}
.open .bar3 {
    -webkit-transform: rotate(45deg) translate(-6px, -6px);
    transform: rotate(45deg) translate(-6px, -6px);
}
.open .mobile-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.mobile-menu {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    height: auto;
    width: 100%;
    background: black;
    padding-bottom: 5%;
}

/* --------------------------------------------------------- TEXT --------------------------------------------------- */
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}

/* -------------------------------------------------------- HEADINGS ------------------------------------------------ */
.heading-medium {
    font-size: 2rem;
    font-weight: 400;
}
.heading-small {
    font-size: 1.5rem;
    font-weight: 300;
}
.heading-large {
    font-size: 2.5rem;
    font-weight: 400;
}
.heading-extra-large {
    font-size: 3.5rem;
    font-weight: 400;
}

/* --------------------------------------------------------- BUTTONS ------------------------------------------------ */
.btn-1 {
    background: #9f2ca2;
    color: white;
    border: none;
    transition: all 0.3s ease-in-out;
    padding:1% 0%;
    width: 100%;
    text-decoration: none;
}
.btn-1:hover {
    background: #77067a;
    transform: scale(1.02);
    color:white;
}

.btn-gray {
    border: none;
    background: #898989;
    color: white;
    width: 100%;
    padding: 1% 0%;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}
.btn-gray:hover {
    transform: scale(1.02);
}
.complete-profile {
    font-size: 2rem;
}
.whatsapp {
    width: 80%;
    background:green;
    text-decoration: none;
}
.whatsapp:hover {
    background:#2a5e14;
    text-decoration: none;
}
/* --------------------------------------------------- FORMS-CONTAINERS --------------------------------------------- */
.full-page-form-container {
    display: flex;
    flex-direction: column;
    height: 90vh;
    justify-content: center;
    align-items: center;
}
.full-page-form-container form {
    display: flex;
    flex-direction: column;
    width: 80%;
}
.default-form-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.default-form-container form {
    display: flex;
    flex-direction: column;
    width: 30%;
    padding:1% 0%;
}

/* ------------------------------------------------------ FORM-DESIGNS ---------------------------------------------- */
.form-main label {
    color: #B27EB3;
    margin: 0.5% 0%;
}
.form-main input, textarea {
    background: #f8e3f9;
    border: 1px solid #e5bde6;
    color: #B27EB3;
    margin: 0.5% 0%;
}
.form-main ::placeholder {
    color: #B27EB3;
    opacity: 1; /* Firefox */
}
.form-main select {
    background: #f8e3f9;
    border: 1px solid #e5bde6;
    color: #B27EB3;
    margin: 0.5% 0%;
}

/* ------------------------------------------------------ DIV ------------------------------------------------------- */
.full-page-div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
}

/* ----------------------------------------------------- COLORS ----------------------------------------------------- */
.violet-color {
    color: #9f2ca2;
}
.red-color {
    color: #d3333c;
}
.white-color {
    color: #FFFFFF;
}

/* --------------------------------------------------- FLASH MESSAGE ------------------------------------------------ */
.success {
    color: green;
}
.error {
    color: red;
}



/* ---------------------------------------------------------------------------------------------------------------- */

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

}

/* html {
  font-family: "Lucida Sans", sans-serif;
} */

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

.cta {
    margin-bottom:5%;
}

.cta div {
    width:35%;
    color: white;
    padding: 8% 0% 0% 5%;
}
.cta h3 {
    font-size: 1rem;
}
.cta p {
    font-size: 0.6rem;
    opacity:0.7;
}
.cta a img{
    width:70%;
    padding:10% 0% 20% 0%;
    transition-duration: 300ms;
}

.cta a img:hover {
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.1);
}
.gallery-menu {
    display: flex;
    justify-content: space-around;
    padding: 0% 20%;
}
.gallery-menu a {
    transition: transform 0.5s;
    padding: 2% 5%;
}
.gallery-menu a:hover {
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
.illustration-btn {
    display: flex;
    justify-content: center;
}
.illustration-btn a {
    width: 10%;
    transition: transform 0.5s;
}
.illustration-btn a:hover {
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
#title {
    text-align: center;
    padding:4% 0% 0% 0%;
    font-size:1.4rem;

}
#title-genre-text {
    text-align: center;
    padding:0% 0% 4% 0%;
    opacity: 0.5;
    font-size: 0.7rem;
}
#title-text {
    text-align: center;
    padding: 3% 20% 8% 20%;
    line-height: 1rem;
    opacity:0.7;
    font-family:sans-serif;
    font-weight:100;
    font-size:0.8rem;
}
.heading {
    margin: 10% 0% 0% 0%;
}

.heading h1 {
    font-size: 1.5rem;
}
.full-width-container {
    display:flex;
    width:100%;
    justify-content:center;
}
.vertical-flex {
    flex-direction:column;
    align-items:center;
}
.full-width-img {
    width: 100%;
}
#character-start h1, #creatures-start h1, #props-start h1, #environment-heading, #gestures {
    font-size: 1rem;
    font-weight: 600;
    padding-left: 2%;
    padding-top: 2%;
    text-align: center;
}
.fixed-menu-container {
    display:flex;
    width:100%;
}
.fixed-menu {
    position:fixed;
    top:80vh;
    left:50vw;
    transform: translate(-50%, -20%);
    text-align:center;
    z-index:5;
}

.fixed-menu div {
    display:flex;
    flex-direction:column;
}
.fixed-menu-inner a {
    background:#174555;
    color: white;
    opacity: 0.8;
    margin:1% 0%;
    padding: 2% 12%;
    width:130%;
    border-radius: 20%;
    transition-duration: 200ms;
    font-size:0.9rem;
}
.fixed-menu-inner a:hover {
    transform: scale(1.04);
    opacity:1;
}
.responsive-iframe {
        width: 100%;
        aspect-ratio: 16/9;
        margin: 1% 1%;
    }
.yt-video-container {
    padding: 0% 5% 5% 5%;
}
.yt-video-container h3, .three-d-photo-container h3 {
    padding-left:1%;
    font-weight:600;
    font-size: 1rem;
}
.three-d-photo-container {
    padding:0% 5% 5% 5%;
}
#three-d-start h1 {
    text-align:center;
    padding-top:3%;
    font-weight:600;
    font-size: 1.4rem;
}

.img-gallery {
    padding: 0% 10%;
}
.img-gallery img {
    padding-top:2%;
}
/* ------------------------------------------------- RESPONSIVE --------------------------------------------------- */

@media only screen and (max-width: 900px) {
    header nav {
        display:none;
    }
    #hamburger-icon {
        display: block;
    }
    .heading-large {
        font-size: 1.5rem;
        font-weight: 400;
    }
}
@media only screen and (min-width: 600px) {
  /* For tablets: */
.fixed-menu {
    width:inherit;
    top:90vh;
    text-align:center;
    z-index:5;
}
 .fixed-menu div {
    display:flex;
    flex-direction:row;
    justify-content:center;
}
.fixed-menu-inner a {
    border-radius: 20%;
    padding: 1% 0%;
    margin:0% 0.5%;
    width:20%;
    text-align:center;
}
  #three-d-start h1 {
    font-size: 1.5rem;
  }
.yt-video-container h3, .three-d-photo-container h3 {
    font-size: 1.3rem;
}
.responsive-iframe {
    width: 47%;
}
#character-start h1, #creatures-start h1, #props-start h1, #environment-heading, #gestures {
    font-size: 1.1rem;
    padding-top: 2%;
}
    .nav-bar {
       font-size: 1.1rem;
   }
   #title-text {
       font-size:0.9rem;
       line-height:1.1rem;
   }
   #title {
       font-size: 1.6rem;
   }
   #title-genre-text {
    font-size: 0.8rem;
   }
   .heading {
    margin: 5% 0% 0% 0%;
    }
   .heading h1 {
    font-size: 1.7rem;
}
.cta a img{
    width:60%;
}
.cta h3 {
    font-size: 1.2rem;
}
.cta p {
    font-size: 0.7rem;
}
    .full-page-form-container form {
        width: 70%;
    }
    .whatsapp {
        width: 70%;
    }
    .heading-large {
        font-size: 1.7rem;
        font-weight: 400;
    }
}
@media only screen and (min-width: 768px) {
.fixed-menu-inner a {
    width:18%;
}
.yt-video-container h3, .three-d-photo-container h3 {
    font-size: 1.4rem;
}
 #three-d-start h1 {
    font-size: 1.6rem;
  }
  /* For desktop: */

#character-start h1, #creatures-start h1, #props-start h1, #environment-heading, #gestures {
    font-size: 1.2rem;
    padding-top: 2%;
}
  .nav-bar {
       font-size: 1.3rem;
   }
   #title-text {
    font-size:1rem;
    line-height:1.3rem;
   }
    #title {
       font-size: 1.8rem;
   }
    #title-genre-text {
        font-size: 0.9rem;
   }
    .heading h1 {
     font-size: 1.8rem;
     margin-left: 3%;
    }
    .cta a img{
    width:50%;
}
.cta h3 {
    font-size: 1.5rem;
}
.cta p {
    font-size: 0.85rem;
}
.cta {
    margin-bottom:3%;
}
    .heading-large {
        font-size: 2.1rem;
        font-weight: 400;
    }
}
@media (min-width: 1200px) {
.fixed-menu-inner a {
    width:12%;
}
.yt-video-container h3, .three-d-photo-container h3 {
    font-size: 1.5rem;
}
#three-d-start h1 {
    font-size: 1.8rem;
  }
#character-start h1, #creatures-start h1, #props-start h1, #environment-heading, #gestures {
    font-size: 1.4rem;
    padding-top: 1.5%;
}
    .nav-bar {
       font-size: 1.4rem;
   }
   #title-text {
    font-size:1.2rem;
    line-height:1.5rem;
   }
   #title {
       font-size: 2.1rem;
   }
    #title-genre-text {
        font-size: 1rem;
   }
    .heading {
        margin: 3% 0% 0% 0%;
    }
    .heading h1 {
        font-size: 2.5rem;
    }
.cta a img{
    width:40%;
}
.cta h3 {
    font-size: 1.8rem;
}
.cta p {
    font-size: 1rem;
}
.cta {
    margin-bottom:2%;
}
    .full-page-form-container form {
        width: 50%;
    }
    .whatsapp {
        width: 50%;
    }
    .heading-large {
        font-size: 2.2rem;
        font-weight: 400;
    }
}
@media (min-width: 1900px) {
.fixed-menu-inner a {
    width:8%;
}
.yt-video-container h3, .three-d-photo-container h3 {
    font-size: 1.6rem;
}
#three-d-start h1 {
    font-size: 2rem;
  }
#character-start h1, #creatures-start h1, #props-start h1, #environment-heading, #gestures {
    font-size: 1.6rem;
    padding-top: 1%;
}
     .nav-bar {
       font-size: 1.7rem;
   }
   #title-text {
    font-size:1.4rem;
    line-height:1.7rem;
   }
   #title {
       font-size: 2.4rem;
   }
    #title-genre-text {
        font-size: 1.1rem;
   }
   .heading h1 {
        font-size: 3rem;
    }
.cta a img{
    width:30%;
}
.cta h3 {
    font-size: 2.2rem;
}
.cta p {
    font-size: 1.2rem;
}
.fixed-menu a {
    font-size:1.1rem;
}
    .full-page-form-container form {
        width: 40%;
    }
    .whatsapp {
        width: 40%;
    }
    .heading-large {
        font-size: 2.3rem;
        font-weight: 400;
    }
}
@media (min-width: 2500px) {

.yt-video-container h3, .three-d-photo-container h3 {
    font-size: 1.8rem;
}
#three-d-start h1 {
    font-size: 2.2rem;
  }
#character-start h1, #creatures-start h1, #props-start h1, #environment-heading, #gestures {
    font-size: 1.8rem;
    padding-top: 1%;
}
     .nav-bar {
       font-size: 2.2rem;
   }
   #title-text {
    font-size:1.6rem;
    line-height:2rem;
   }
   #title {
       font-size: 3.2rem;
   }
    #title-genre-text {
        font-size: 1.4rem;
   }
   .heading h1 {
        font-size: 4rem;
    }
    .cta a img{
    width:20%;
}
    .cta h3 {
    font-size: 2.8rem;
}
.cta p {
    font-size: 1.4rem;
}
.fixed-menu a {
    font-size:1.3rem;
}
    .full-page-form-container form {
        width: 30%;
    }
    .whatsapp {
        width: 30%;
    }
    .heading-large {
        font-size: 2.5rem;
        font-weight: 400;
    }
}

/*-------------------------------------------------------------------------------------------------------------------*/

.portfolio-options {
    text-align: center;
    background-image: url('../images/web_design/portfolio_button.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 2% 3%;
    color: #d9d9d9;
    background-clip: content-box, padding-box;
}
.portfolio-options h1{
    padding-top:5%;
    padding-bottom:5%;
}

a {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
    color: white;
}
/* .padded-center-container {
    padding: 2% 10%;
} */

.portrait {
    display: flex;
    justify-content: center;
}
.portrait img {
    height: 1000px;
}
.center {
    display: flex;
    justify-content: center;
}
.center img {
    width: 16%;
}
.center-text {
    text-align: center;
}
.right-text {
    text-align: right;
}


/*  --------------------------------------------------------------------- HOME ----------------------------------------------------------------------------------------------------------------------  */