html, body {
width:100%;
height:100%;
padding:0;
margin:0;
color:#333;
font-family: 'Noto Sans', sans-serif;
}

h1, p, span, div, li { font-family: 'Noto Sans', sans-serif; }

.responsive { max-width:100%;}

.desktop-inline { display:inline-block; }

/* Top */

#top-container { 
    min-height: 100vh;
    max-width:100%;
    width:100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: sans-serif;
    position:relative;
    overflow:hidden;
    background: rgb(229,228,255);
    background: linear-gradient(68deg, rgba(229,228,255,1) 0%, rgba(255,252,252,1) 50%, rgba(223,243,255,1) 89%);
}

.toptext { width:800px; margin:0 auto; text-align:center }
.topimage { height:100%; }

.bear { width:200px; height:auto; position:absolute; top:150px; left:-180px; animation: animate-bear 3s forwards; animation-delay: 1s;}
.rabbit { width:200px; height:auto;  position:absolute; position:absolute; bottom:100px; right:-160px; animation: animate-rabbit 3s forwards; animation-delay: 1.5s;  }

.toptitle { font-size: 80px; color:#fff; display:block; line-height:85px; background: #36A5CF;
background: repeating-linear-gradient(to right, #36A5CF 0%, #9151CF 50%, #AE8300 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; font-weight:bold;
animation: animation-toptitle 3s forwards; 
 animation-delay: 0.5s;
    opacity:0
}

.toptext hr { border-top:4px solid #ddd; border-left:none; border-right:none; opacity:0; animation: animate-line 1s forwards;  }

.topcontent { font-size:50px; color:#111; line-height:60px; display:block; opacity:0; animation: animation-topcontent 2s forwards; animation-delay: 1s; }


@keyframes animate-line {
  0%   { 
opacity:0;
width:0%;

}
  100% { 
opacity:1;
width:100%;
}
}

@keyframes animation-toptitle {
  0%   { 
opacity:0;
      -ms-transform: translate(0, 20px); /* IE 9 */
    -webkit-transform: translate(0, 20px); /* Safari */
    transform: translate(0, 15px);

}
  100% { 
opacity:1;
-ms-transform: translate(0, -20px); /* IE 9 */
    -webkit-transform: translate(0, -20px); /* Safari */
    transform: translate(0, -20px);
}
}

@keyframes animation-topcontent {
  0%   { 
opacity:0;
      -ms-transform: translate(0, -15px); /* IE 9 */
    -webkit-transform: translate(0, -15px); /* Safari */
    transform: translate(0, -15px);

}
  100% { 
opacity:1;
-ms-transform: translate(0, 15px); /* IE 9 */
    -webkit-transform: translate(0, 15px); /* Safari */
    transform: translate(0, 15px);
}
}

@keyframes animate-bear {
  0%   { 
left:-180px;

}
  50%   { 
left:-60px;

}
  100% { 
left:-60px;
-ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari */
    transform: rotate(20deg);
}
}

@keyframes animate-rabbit {
  0%   { 
right:-160px;

}
  50%   { 
right:-60px;

}
  100% { 
right:-60px;
-ms-transform: rotate(-20deg); /* IE 9 */
    -webkit-transform: rotate(-20deg); /* Safari */
    transform: rotate(-20deg);
}
}

@media only screen and (max-width: 768px) {
    
.desktop-inline { display:none; }

    
#top-container { padding-bottom:80px; }

.toptext { width:90%; margin:0 auto; text-align:center }
.toptitle { font-size: 50px; color:#fff; display:block; line-height:60px; background: #36A5CF;
background: repeating-linear-gradient(to right, #36A5CF 0%, #9151CF 50%, #AE8300 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; font-weight:bold;
animation: animation-toptitle 3s forwards; 
 animation-delay: 0.5s;
    opacity:0
}

.toptext hr { border-top:4px solid #ddd; border-left:none; border-right:none; opacity:0; animation: animate-line 1s forwards;  }

.topcontent { font-size:30px; color:#111; line-height:40px; display:block; opacity:0; animation: animation-topcontent 2s forwards; animation-delay: 1s; }    
.bear { width:180px; height:auto; position:absolute; top:auto; bottom:120px; left:-180px; animation: animate-bear 3s forwards; animation-delay: 1s;}
.rabbit { width:180px; height:auto;  position:absolute; bottom:60px; right:-160px; animation: animate-rabbit 3s forwards; animation-delay: 1.5s;  }
    
}

/* About us */

.turqoise-background { 
    background:#36A5CF; 
    min-height: 100vh;
    max-width:100%;
    width:100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: sans-serif;
    position:relative;
    overflow:hidden;
}

.about-us-container { width:500px; margin:0 auto; }

.page-title { color:#fff; font-size:60px; line-height:70px; margin-bottom:20px; display:block }

.page-text { font-size:26px; line-height:36px; color:#fff; margin-top:0; }

.bear-keyboard { position:absolute; width:500px; left:-160px; rotate:50deg}

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

.about-us-container { width:500px; margin:0 auto; }

.bear-keyboard { position:absolute; width:250px; left:-100px; rotate:50deg}

}

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

.page-title { color:#fff; font-size:45px; line-height:56px; margin-bottom:20px; display:block;  }

.page-text { font-size:20px; line-height:30px; color:#fff; margin-top:0; }

.about-us-container { width:80%; padding-bottom:120px; }

.bear-keyboard { position:absolute; width:230px; left:-90px; rotate:50deg; bottom:-10px}

}

/* Unique */

.violet-background { 
    background:#9151CF; 
    min-height: 100vh;
    max-width:100%;
    width:100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: sans-serif;
    position:relative;
    overflow:hidden;
}

.what-makes-us-unique-container { width:700px; margin:0 auto; }

.unique-light { position:absolute; width:250px; right:-40px; rotate:-30deg; top:0;  }

.unique-web { position:absolute; width:180px; right:-50px; rotate:-40deg; top:330px; }

.unique-internet-marketing { position:absolute; width:160px; right:-10px; rotate:-40deg; bottom:30px; }

@media only screen and (max-width: 768px) {
    
.what-makes-us-unique-container { width:80%; position:relative; margin:0 auto}
    
.unique-light { position:absolute; width:150px; right:-40px; rotate:-30deg; top:0;  }

.unique-web { position:absolute; width:100px; right:-50px; rotate:-40deg; top:330px; }

.unique-internet-marketing { position:absolute; width:100px; right:-10px; rotate:-40deg; bottom:30px; }

}


/* Our services */

.gold-background { 
    background:#AE8300; 
    min-height: 100vh;
    max-width:100%;
    width:100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: sans-serif;
    position:relative;
    overflow:hidden;
}

.our-services-container { 
   width:600px; position:relative; }

.bear-phone { position:absolute; width:400px; left:0; bottom:0}

.services-container { width:100%; position:relative;  }
.services-container-inner { float:left; width:50%; position:relative;  background-image: linear-gradient(90deg, #ffffff 25%, #f1e6ff 25%, #f1e6ff 50%, #ffffff 50%, #ffffff 75%, #f1e6ff 75%, #f1e6ff 100%);
    background-size: 40.00px 40.00px;}
.services-sub-column-main { width:100%; position:relative; padding:30px; height:250px; }
.services-column { float:left; padding:30px; position:relative }
.services-column h3 {font-size:26px; display:block; margin-bottom:10px;}
.services-column p { font-size:18px; }
.services-sub-column { float:left; padding:30px; width:50%; }
.color1 { background:#36A5CF; color:#fff; position:relative; overflow:hidden} 
.color2 { background:#eabcaa; height:260px; }
.color3 { background:#fbd7d6; height:260px; }
.color4 { background:#9151CF; color:#fff; margin-top:40px;}
.color5 { background:#F2CFB3;  height:270px;}
.color6 { background:#feeee1; height:270px; }
.color7 {    background: linear-gradient(135deg, #fff5e3 60%, #fae6c1 40%); 
  height:280px;  }
.color8 { background:#f6a693; height:230px; }
.color9 { background:#f7e1ab; height:230px; }

.services-sub-column-video { float:left; padding:0; width:50%; }

.cross-platform { position:absolute; bottom:0; right:30px; width:250px; rotate:-20deg; }
.web-design-content { width:380px}
.campaign-content { width:350px;}
.bear-and-rabbit-phone { position:absolute; bottom:-70px; right:60px; width:360px; }



.background-cover { background-image: linear-gradient(90deg, #ffffff 25%, #fff6e6 25%, #fff6e6 50%, #ffffff 50%, #ffffff 75%, #fff6e6 75%, #fff6e6 100%);
    background-size: 40.00px 40.00px; position:relative; margin-top:-20px; z-index:10; width:100%; height:100px; }


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


.our-services-container { 
   width:80%; margin:0 auto 160px auto; position:relative; }

.bear-phone { position:absolute; width:300px; left:0; bottom:0}    
    
.services-container-inner { float:left; width:100%; position:relative}
.services-sub-column-main { width:100%; position:relative; padding:30px; height:auto; }
.services-column { float:left; padding:30px; position:relative }
.services-column h3 {font-size:26px; display:block; margin-bottom:10px;}
.services-column p { font-size:18px; }
.services-sub-column { float:left; padding:30px; width:100%; }
.color1 { background:#36A5CF; color:#fff; position:relative; overflow:hidden} 
.color2 { background:#eabcaa; height:auto; }
.color3 { background:#fbd7d6; height:auto; }
.color4 { background:#9151CF; color:#fff; margin-top:0;}
.color5 { background:#F2CFB3;  height:auto;}
.color6 { background:#feeee1; height:auto; }
.color7 {    background: linear-gradient(135deg, #fff5e3 60%, #fae6c1 40%); 
  height:auto;  }
.color8 { background:#f6a693; height:auto; }
.color9 { background:#f7e1ab; height:auto; }    
    
.services-sub-column-video { float:left; padding:0; width:100%; }

.cross-platform { position:absolute; bottom:25%; right:0; width:120px; rotate:-20deg; }
.web-design-content { width:70%; }
.campaign-content { width:60%; }
.bear-and-rabbit-phone { position:absolute; bottom:-30px; right:10px; width:160px; }
    
}


/* Projects */

.yellow-background { background:#f3f0a6; 
    min-height: 100vh;
    max-width:100%;
    width:100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: sans-serif;
    position:relative;
    overflow:hidden;
}

.projects { width:500px; position:relative }
.projects .page-title, .projects p { color:#000; }

.bear-mouse { position:absolute; right:-50px; bottom:150px; width:400px;}

.projects-container { width:100%; position:relative; margin:100px auto;}

.project-container { margin-left:50px; margin-right:50px; }
.project-container img { max-width:100%; margin-bottom:20px; display:block}
.projects-container .content-text { color:#000; font-size:14px; line-height:20px; padding-left:30px; padding-right:30px;}

.work-title { font-size:20px; color:#000; display:block; margin-bottom:10px; padding-left:30px; padding-right:30px;}


.splide__slide img {
  width: 100%;
  height: auto;
}


#thumbnail-carousel { width:600px; margin:0 auto}

#thumbnail-carousel .splide__arrow--prev {left:-35px;}
#thumbnail-carousel .splide__arrow--next {right:-35px;}

#main-projects .splide__arrow:disabled, #thumbnail-carousel .splide__arrow:disabled { display:none}



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

.projects { width:80%; position:relative; margin:0 auto 160px auto;  }
.projects .title, .projects p { color:#000; }

.bear-mouse { position:absolute; right:-50px; bottom:60px; width:300px;}

.projects-container { width:100%; position:relative;}

.project-container { margin-left:20px; margin-right:20px; }
.project-container img { max-width:100%; margin-bottom:20px; display:block}
.projects-container .content-text { color:#000; font-size:14px; line-height:20px; padding-left:10px; padding-right:10px;}

.work-title { font-size:20px; color:#000; display:block; margin-bottom:10px; padding-left:10px; padding-right:10px;}


.splide__slide img {
  width: 100%;
  height: auto;
}

#thumbnail-carousel { width:100%; margin:0 auto}

#thumbnail-carousel .splide__arrow--prev {left:0;}
#thumbnail-carousel .splide__arrow--next {right:0;}

#main-projects .splide__arrow:disabled, #thumbnail-carousel .splide__arrow:disabled { display:none}


    
}

.logo-container { width:960px; margin:60px auto 160px auto; }

.logo-column { width:200px; float:left;  margin:20px;}

.reduce-size-elixir-logo { width:60px; height:auto; }
.reduce-size-gatsby-logo { width:75px; height:auto; }
.reduce-size-lucido-l-logo { width:110px; height:auto; }
.reduce-size-saborino-logo { width:90px; height:auto; }
.reduce-size-shiseido-logo { width:90px; height:auto; }
.reduce-size-sumitomo-logo { width:180px; height:auto; }


@media only screen and (max-width: 1000px) {
   
.logo-container { width:320px; margin:30px auto 140px auto; }

.logo-column { width:160px; float:left;  margin:20px auto;}

}

/* Contact us */

.light-purple-background { background:#f6eafa; 
    min-height: 100vh;
    max-width:100%;
    width:100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: sans-serif;
    position:relative;
    overflow:hidden;
}

.contact-us-container { width:600px; position:relative }

.contact-us-container .page-title, .contact-us-container p, .contact-us-container .page-text { color:#000; }

.contact-us-container  .link-text {  color:#000; transition:0.3s; opacity:0.6}
.contact-us-container  .link-text:hover {  opacity:0.4 }
.contact-us-container a { color:#000; text-decoration:none; }


@media only screen and (max-width: 768px) {
    
    .contact-us-container { width:80%; position:relative }
}

.bg {
  background-image: url("../img/background.jpg"); 
  width:100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.desktop-view, .desktop { display:block; }
.mobile-view, .mobile { display:none; }


.light {  position: relative; margin:0px; animation: animate-light 10s infinite; }
.web-service {  position: relative; margin-left:100px; margin-top:20px;  animation: animate-web-service 8s infinite; }
.internet-marketing {  position: relative; margin-top:40px; margin-left:200px; animation: animate-internet-marketing 6s infinite;}

@keyframes animate-light {
  0%   { 
left:0px;
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
  50%   { 
left:0px;
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
  100% { 
left:0px;
-ms-transform: rotate(-10deg); 
transform: rotate(-10deg); 
}
}

@keyframes animate-web-service {
  0%   { 
-ms-transform: translatey(10px);
  transform: translatey(10px);
  }
50% {
-ms-transform: translatey(-10px);
  transform: translatey(-10px);
}
  100% { 
-ms-transform: translatey(10px);
  transform: translatey(10px);
}

}

@keyframes animate-internet-marketing {
   0%   { 
-ms-transform: scale(1.2);
  transform: scale(1.2);
  }
50% {
-ms-transform: scale(1);
  transform: scale(1);
}
  100% { 
-ms-transform: scale(1.2);
  transform: scale(1.2);
}

}

#about-us { width:100%; min-height:100%; background-color:#fff; color:#333; padding-top:30px; }

#our-services { width:100%; min-height:100%; max-height:auto; background-color:#f6eafa; color:#333; padding-top:30px; padding-bottom:30px; }

#projects { width:100%; min-height:100%; max-height:auto; background-color:#fff; color:#333; padding-top:30px; }

#contact-us { width:100%; max-height:auto; background-color:#f6eafa; color:#333; padding:30px;}

.about-us-content, .our-services-content, .projects-content, .contact-us-content { width:1100px; margin:0 auto; padding:60px; }

.copyright { width:100%; background-color:#ae8300; padding:20px; font-size:14px; color:#fff; text-align:center;}

.title { color:#ae8300; }
.work-title { color:#ae8300; font-size:20px; line-height:24px; display:block; margin-bottom:10px; }
.main-text { font-size:20px; margin-bottom:60px; }
.content-title { font-size:24px;margin-top:10px;margin-bottom:10px;color:#ae8300;line-height:26px; }
.content-text { font-size:16px; }
.work-type { font-size:14px; color:#aaa; }


.icon-branding { float:right; text-align:right; padding:16px 0px 0px 6px; }
.icon-search, .icon-social, .icon-web { float:right; text-align:right; padding:16px 0px 0px 6px; }
.icon-analytics { float:right; text-align:right; padding:10px 0px 10px 6px; }
.icon-edm, .icon-training { float:right; text-align:right; padding:10px 0px 14px 6px; }
.icon-campaign { float:right; text-align:right; padding:16px 0px 10px 6px; } 
.icon-storyboard { float:right; text-align:right; padding:16px 0px 14px 6px; } 

.contact-form { background-color:#fff; border-radius:10px; margin-top:30px; margin-bottom:30px; padding:20px; }
.red-text { color:red; }

.spacing-right { margin-left:0px;padding-left:0px;padding-right:60px; }
.spacing-left { margin-left:0px;padding-left:60px;padding-right:0px; }
.spacing-bottom { margin-bottom:30px; }

.padding-spacing-right { margin:0px;padding-right:60px; }
.padding-spacing-left { margin:0px;padding-left:60px; }

.portfolio-spacing-bottom { margin-bottom:100px; }

#nav { background:rgb(255, 255, 255, 0.9); width:100%; height:65px; position:fixed; z-index:99; animation: animate-nav 1s;}
#nav p { width:35px; height:5px; background-color:#ae8300; margin:6px 0; }

@keyframes animate-nav {
  0%   { opacity:0; }
  100% { opacity:1; }
}

.logo { position:absolute; top:10px; left:15px;}
.logo-img { width:150px; height:43px; }

#nav-menu { position:fixed;  top: 0; left: 0; right: 0; bottom: 0; background:#ae8300; width:100%; height:0; z-index:99; overflow-x: hidden; transition: 0.5s; }
#nav-menu .nav { position: relative; padding:20% 30% 20% 40%; transition: 0.5s; }
#nav-menu a { font-size:30px; color:#fff; text-decoration:none; display:block; margin-bottom:36px;}
#nav-menu a:hover { border-bottom:6px solid #fff; margin-bottom:30px;}
#nav-menu .close { position:absolute; top:20px; right:20px; font-size:56px; color:#fff; z-index:99; }

.desktop-nav { position:absolute; top:20px; right:15px; }

.desktop-nav a { margin-right:20px; text-decoration:none; font-size:16px; transition:0.3s; }
.desktop-nav a:hover { color:#AE8300; opacity:1; border-bottom:1px solid #AE8300; padding-bottom:5px;}

.accordion {
  background-color: #fff;
  color: #000;
  cursor: pointer;
  padding: 20px;
  margin-bottom:1px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #e6caf1;
}

.accordion:after {
  content: '\002B';
  color: #000;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 20px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  border:none;
  margin-bottom:1px;
  border-radius:0;
}

.panel p { padding:20px; }


.branding-and-consulting, .search-engine-marketing, .social-media-marketing, .web-design-and-development, .analytics, .edm, .campaign-planning-and-execution, .storyboard-and-video-production, .training { margin-left:50px; }

.branding-and-consulting::before { position:absolute; margin-left:-50px; margin-top:-3px; content:" "; width:31px; height:30px; background:url("../img/branding-and-consulting.png");  background-repeat: no-repeat; background-size: cover; }

.search-engine-marketing::before { position:absolute; margin-left:-50px; margin-top:-3px; content:" "; width:36px; height:30px; background:url("../img/search-engine-marketing.png");  background-repeat: no-repeat; background-size: cover; }

.social-media-marketing::before { position:absolute; margin-left:-50px; content:" "; width:36px; height:30px; background:url("../img/social-media-marketing.png");  background-repeat: no-repeat; background-size: cover; }

.web-design-and-development::before { position:absolute; margin-left:-50px; content:" "; width:36px; height:26px; background:url("../img/web-design-and-development.png");  background-repeat: no-repeat; background-size: cover; }

.analytics::before { position:absolute; margin-left:-50px; content:" "; width:39px; height:30px; background:url("../img/analytics.png");  background-repeat: no-repeat; background-size: cover; }

.edm::before { position:absolute; margin-left:-50px; content:" "; width:34px; height:25px; background:url("../img/edm.png");  background-repeat: no-repeat; background-size: cover; }

.campaign-planning-and-execution::before { position:absolute; margin-left:-50px; content:" "; width:33px; height:30px; background:url("../img/campaign-planning-and-execution.png");  background-repeat: no-repeat; background-size: cover; }

.storyboard-and-video-production::before { position:absolute; margin-left:-53px; content:" "; width:38px; height:30px; background:url("../img/storyboard-and-video-production.png");  background-repeat: no-repeat; background-size: cover; }

.training::before { position:absolute; margin-left:-50px; content:" "; width:31px; height:30px; background:url("../img/training.png");  background-repeat: no-repeat; background-size: cover; }

.center-align {  display: inline-block;
   vertical-align: middle;
   float: none; height:100px; width:200px; }
   
@media only screen and (max-width: 1000px) {

.desktop-view, .desktop { display:none; }
.mobile-view, .mobile { display:block; }

.about-us-content, .our-services-content, .projects-content, .contact-us-content { width:100%; margin:0 auto; padding:40px; }


.light { width:24%; height:24%; float:left; position: relative; margin: 0px 10px 0px 20px; animation: animate-light 10s infinite; }
.web-service { width:24%; height:24%; float:left; position: relative; margin: 0px 10px 0px 20px;   animation: animate-web-service 8s infinite; }
.internet-marketing { width:24%; height:24%; float:left; position: relative; margin: 20px 10px 0px 20px;  animation: animate-internet-marketing 6s infinite;}

.title { font-size:30px; line-height:auto; margin-bottom:10px;}
.main-text { font-size:20px; line-height:24px; margin-bottom:60px; }
.content-text { font-size:16px; line-height:auto; }

.spacing-right { margin-left:0px;padding-left:0px;padding-right:0px; }
.spacing-left { margin-left:0px;padding-top:30px; padding-left:0px;padding-right:0px; }
.spacing-bottom { margin-bottom:0px; }

.padding-spacing-right { margin:0px 0px 10px 0px; padding:20px;  }
.padding-spacing-left { margin:0px 0px 10px 0px;  padding:20px; }
.portfolio-spacing-bottom { margin-bottom:60px; }

.img-spacing-bottom { margin-bottom:10px; }

#nav { padding-top:12px; padding-right:20px; }
#nav-menu .nav { position: relative; padding:30% 20% 10% 20%; transition: 0.5s; }

}