@import url('fonts/fonts.css');

html, body { height:100%; }

body { background:#fff; margin: 0; padding: 0; font-family: 'Campton Book', Arial; color:#474747;}

* { margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
a { color:#883269;  text-decoration:none;  transition:all 0.4s;  -moz-transition:all 0.4s; -webkit-transition:all 0.4s;  -o-transition:all 0.4s; }
a:hover { color:#ffca59;  transition:all 0.4s;  -moz-transition:all 0.4s;  -webkit-transition:all 0.4s;  -o-transition:all 0.4s; }
p, h1, h2, h3, h4, h5, h6, ul, li, img, iframe, form, table, td, tr { line-height:100%; font-weight:normal; margin:0;  padding:0;  border:none;  border-collapse:collapse; }
b, strong { font-family:'Campton SemiBold', Arial; }
.clear { clear:both; }
#toTop { display:none; width:40px;  height:40px;  background:url(img/totop.webp) no-repeat center #883269;  background-size:20px auto;  text-align:left;  text-indent:-9999px;  position:fixed;  bottom:40px; right:60px; z-index:20000; cursor:pointer; -webkit-border-radius: 10px;  -moz-border-radius: 10px;  border-radius: 10px; }

/* animated header style */

.cbp-af-header { position:fixed; top:0; left:0; z-index:10000; width:100%; height:202px; background-color: rgb(252,227,46,0.75); background-color: rgba(252,227,46,0.75); transition:all 0.4s; -moz-transition:all 0.4s; -webkit-transition:all 0.4s; -o-transition:all 0.4s; -webkit-box-shadow: 0px 0px 20px 0px rgba(60,80,147,0.25); -moz-box-shadow: 0px 0px 20px 0px rgba(60,80,147,0.25); box-shadow: 0px 0px 20px 0px rgba(60,80,147,0.25); }

  ul.icons-menu { display:block; width: auto; height: 40px; position: absolute; top:40px; z-index:2; }
    ul.icons-menu.left { float:left; left:60px; }  
    ul.icons-menu.right { float:right; right:60px; }
  ul.icons-menu li { display:inline; }
    ul.icons-menu li a { display:block; float:left; width:40px; height:40px; text-align:left; text-indent:-9999px; }
      ul.icons-menu li a.home { background: url(img/icon/home.webp) no-repeat center center; background-size: 100% 100%; margin: 0 10px 0 0; } 
      ul.icons-menu li a.phone { background: url(img/icon/phone.webp) no-repeat center center; background-size: 100% 100%; margin: 0 10px 0 0; } 
      ul.icons-menu li a.email { background: url(img/icon/email.webp) no-repeat center center; background-size: 100% 100%; margin: 0 10px 0 0; } 
      ul.icons-menu li a.location { background: url(img/icon/location.webp) no-repeat center center; background-size: 100% 100%; margin: 0 0 0 10px; } 
      ul.icons-menu li a.ig { background: url(img/icon/ig.webp) no-repeat center center; background-size: 100% 100%; margin: 0 0 0 10px; } 
      ul.icons-menu li a.fb { background: url(img/icon/fb.webp) no-repeat center center; background-size: 100% 100%; margin: 0 0 0 10px; } 
        ul.icons-menu li a.home:hover, ul.icons-menu li a.phone:hover, ul.icons-menu li a.email:hover, ul.icons-menu li a.location:hover, ul.icons-menu li a.ig:hover, ul.icons-menu li a.fb:hover { transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -moz-transform: scale(1.1); } 

  a.logo { position: relative; z-index: 3; display:block; width:253px; height:120px; opacity: 1; margin:30px auto 2px auto; text-align:left; text-indent:-9999px; background:url(img/logo.webp) no-repeat center center; }
    a.logo:hover { transform: scale(1.04); -ms-transform: scale(1.04); -webkit-transform: scale(1.04); -o-transform: scale(1.04); -moz-transform: scale(1.04); }

  .hdr-wht-bx { position:absolute; top:0; left:0; z-index:1; width:100%; height:120px; background: url(img/header-overlay.webp) no-repeat center top #fff; background-size: 100% auto; transition:all 0.4s; -moz-transition:all 0.4s; -webkit-transition:all 0.4s; -o-transition:all 0.4s; -webkit-box-shadow: 0px 0px 20px 0px rgba(60,80,147,0.25); -moz-box-shadow: 0px 0px 20px 0px rgba(60,80,147,0.25); box-shadow: 0px 0px 20px 0px rgba(60,80,147,0.25); }

  /* mainmenu */
    #mainmenu { width: 100%; height: 50px; display: -webkit-box;  display: -ms-flexbox;  display: -webkit-flex;  display: flex;  -webkit-box-pack: center;  -ms-flex-pack: center; -webkit-justify-content: center;  justify-content: center;  -webkit-box-align: center;  -ms-flex-align: center; -webkit-align-items: center;  align-items: center;}
      #toggle, .toggle { display:none; }
      .links > li {   list-style:none;   float:left;   width:auto; }
	    .clearfix:before, .clearfix:after {   display:table;   content:""; }
      .clearfix:after { clear:both; }
      .links, .links > li, .links > li > a { height:100%; }
        .links > li > a { display:block;  font-size:16px;   color:#883269; line-height:50px; font-family:'Campton Medium', Arial; padding:0 13px; -webkit-border-top-left-radius: 5px;-webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; }
        .links > li > a:hover, .links > li > a:focus, .links > li > a.active { color:#44ad4e;  background:#fff; }
      .toggle { z-index:2; }
    /* mainmenu */

  /* transitions and class for reduced height */
  .cbp-af-header.cbp-af-header-shrink { top:-150px; transition:all 0.4s; -moz-transition:all 0.4s; -webkit-transition:all 0.4s; -o-transition:all 0.4s; }    
    .cbp-af-header.cbp-af-header-shrink  a.logo { opacity: 0; }
    
/* animated header style */

/* spot style */

.spot { width:100%; height:100%; position: relative;}  

  .swiper-slide { overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
    .swiper-slide img { display:block; width:100%; height:auto; }
  
  .spot-overlay-color { width:100%; height:100%; position:absolute; top:0; left:0; z-index:8; background: url(img/spot/overlay-02.webp) no-repeat center bottom; background-size: 100% auto; }
  .spot-overlay-kids { width:100%; height:331px; position:absolute; bottom:-37px; left:0; z-index:9; background: url(img/spot/overlay-01.webp) no-repeat center bottom; background-size: 100% auto; font-size: 66px; color:#fff; font-family:'Campton SemiBold', Arial; text-align: center; line-height: 100%; text-shadow: 3px 3px 12px #5f5f5b; }
    .spot-overlay-kids span { font-size: 42px; color:#ea52b2; }

/* spot style */

.page-header {display:block; width:100%; padding:120px 0 0 0; position:relative; background: #fff;}
  .page-header img {width:100%; height:auto;}
  .page-header h1 {position:absolute; bottom:60px; left:0; z-index:14; display: block; width: 100%; font-size: 46px; color:#fff; font-family:'Campton SemiBold', Arial; text-align: center; line-height: 100%; text-shadow: 3px 3px 12px #5f5f5b;} 
  .page-header.no-bg-img {padding:232px 0 30px 0; background-color: rgb(252,227,46,1); background-color: rgba(252,227,46,1);}
  .page-header.no-bg-img h1 {position:static; bottom:none; left:none; z-index:none; font-size: 30px; color:#ea52b2; text-shadow: none;} 

  .content-holder { width:100%; padding:90px 0; }
.content-holder.doodles { min-height: 227px; background: url(img/hp-bg-welcome.webp) no-repeat center bottom; background-size: 100% auto; border-bottom:2px solid #fadd16; }
.content-holder.mobile-app { min-height: 520px; background: url(img/hp-bg-app.webp) no-repeat center bottom; background-size:cover; display: -webkit-box;  display: -ms-flexbox;  display: -webkit-flex;  display: flex;  -webkit-box-pack: center;  -ms-flex-pack: center; -webkit-justify-content: center;  justify-content: center;  -webkit-box-align: center;  -ms-flex-align: center; -webkit-align-items: center;  align-items: center; }
.content-holder.instagram { min-height: 408px; background: url(img/hp-bg-instagram.webp) no-repeat center bottom; background-size:cover; border-bottom: 10px solid #fff; display: -webkit-box;  display: -ms-flexbox;  display: -webkit-flex;  display: flex;  -webkit-box-pack: center;  -ms-flex-pack: center; -webkit-justify-content: center;  justify-content: center;  -webkit-box-align: center;  -ms-flex-align: center; -webkit-align-items: center;  align-items: center; }
  
.content { width:1280px; margin:0 auto; }

.content-holder h1 { font-size:42px; color:#883269; font-family:'Campton SemiBold', Arial; line-height: 100%; margin:0 0 60px 0; }
.content-holder h2 { font-size:36px; color:#13aedb; font-family:'Campton SemiBold', Arial; line-height: 100%; margin:0 0 30px 0; }

.content-holder p { color:#474747; font-size: 18px; line-height:140%; margin:0 0 30px 0;}
  .centered { text-align:center; }
  .content-holder p:last-child {margin:0;}
  .content-holder p b.st2 { font-size: 22px; font-family:'Campton SemiBold', Arial;}

a.buttons {display:block; width:240px; height:60px; margin:30px auto 0 auto; line-height:60px; text-align:center; font-size:18px; color:#883269; background:#fadd14; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
  a.buttons:hover {background:#883269; color:#fff;}

  .content-holder.mobile-app .content { font-size: 46px; color:#fff; font-family:'Campton Medium', Arial; text-align: center; line-height: 120%; text-shadow: 3px 3px 12px #5f5f5b; }
    .content-holder.mobile-app .content b { font-size: 66px; color:#ffe956; font-family:'Campton SemiBold', Arial; }
    .mobile-app-buttons { display:flex; flex-wrap:wrap; width: 580px; height: 76px; margin: 40px auto 0 auto; }
    .mobile-app-buttons img { width: 230px; height: auto; margin: 0 30px; transition:all 0.4s; -moz-transition:all 0.4s; -webkit-transition:all 0.4s; -o-transition:all 0.4s; }
    .mobile-app-buttons img:hover {transform: scale(0.94); -ms-transform: scale(0.94); -webkit-transform: scale(0.94); -o-transform: scale(0.94); -moz-transform: scale(0.94);}

  .content-holder.instagram .content { font-size: 46px; color:#fff; font-family:'Campton Medium', Arial; text-align: center; line-height: 140%; text-shadow: 3px 3px 12px #5f5f5b; }
    .content-holder.instagram .content b { font-size: 66px; font-family:'Campton Bold', Arial; }
    a.instagram-button {display:block; width:226px; height:66px; margin:30px auto 0 auto; text-align:left; text-indent: -9999px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: url(img/instagram-button.webp) no-repeat center center; background-size: 100% 100%;}
      a.instagram-button:hover {transform: scale(0.94); -ms-transform: scale(0.94); -webkit-transform: scale(0.94); -o-transform: scale(0.94); -moz-transform: scale(0.94);}
  
  .cards { display:flex; flex-wrap:wrap;}
    .cards a { width:21.484375%; margin:0 4.6875% 30px 0; overflow:hidden; background: white; position: relative; -webkit-border-radius:10px; -moz-border-radius: 10px; border-radius: 10px; }
      .cards a:nth-child(4) {margin:0 0 30px 0;}    
      .cards a:hover { transform: scale(1.04); -ms-transform: scale(1.04); -webkit-transform: scale(1.04); -o-transform: scale(1.04); -moz-transform: scale(1.04); box-shadow: 5px 5px 15px 0px rgba(126, 99, 99, 0.4); -webkit-box-shadow: 5px 5px 15px 0px rgba(8,8,8,0.4); -moz-box-shadow: 5px 5px 15px 0px rgba(8,8,8,0.4); }	
      .cards a img {display:block; width:100%; height:auto; transition:all 0.4s; -moz-transition:all 0.4s; -webkit-transition:all 0.4s; -o-transition:all 0.4s; }   
      .cards a span { position: absolute; top:0; left:0; z-index: 1; display: block; width: 100%; height: 100%; }
        .cards a span.color01 { background: url(img/photos/c-o-1.webp) no-repeat center bottom; background-size: 100% auto; }
        .cards a span.color02 { background: url(img/photos/c-o-2.webp) no-repeat center bottom; background-size: 100% auto; }
        .cards a span.color03 { background: url(img/photos/c-o-3.webp) no-repeat center bottom; background-size: 100% auto; }
        .cards a span.color04 { background: url(img/photos/c-o-4.webp) no-repeat center bottom; background-size: 100% auto; }
        .cards a span label { position: absolute; bottom:30px; left:30px; z-index: 2; font-size:24px; color:#fff; font-family:'Campton SemiBold', Arial; }

  .our-services { display:block; width: 100%; padding: 30px; background-color: #f2fbf5; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
      .our-services:hover { background-color: #fff;  box-shadow: 5px 5px 15px 0px rgba(126, 99, 99, 0.4); -webkit-box-shadow: 5px 5px 15px 0px rgba(8,8,8,0.4); -moz-box-shadow: 5px 5px 15px 0px rgba(8,8,8,0.4); }
    .our-services img { display:block; width: 142px; height: auto; margin:0 auto 30px auto ; }
    .our-services h3 { display:block; text-align: center;font-size: 22px; line-height: 100%; font-family:'Campton SemiBold', Arial; margin: 0 0 15px 0; }
      .oshc1 { color:#796bc8; }
      .oshc2 { color:#ebb615; }
      .oshc3 { color:#e4544e; }
      .oshc4 { color:#22b56e; }
      .oshc5 { color:#0e82d3; }
      .oshc6 { color:#dc8616; }
      .oshc7 { color:#252525; }
      .oshc8 { color:#2c5b8b; }
      .oshc9 { color:#de06e1; }
      .oshc10 { color:#094f08; }
      .oshc11 { color:#440eb0; }
      .oshc12 { color:#a94edd; }
    .our-services span { display:block; min-height: 126px; text-align: center; color:#474747; font-size: 14px; line-height: 18px; }
    .our-services.subp { float:left; width: 23%; margin: 0 1% 30px 1%; }
    .our-services.subp span { min-height: 216px; }

  img.full {display:block; width:100%; margin:0 0 30px 0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0px 0px 20px 0px rgba(60,80,147,0.25); -moz-box-shadow: 0px 0px 20px 0px rgba(60,80,147,0.25); box-shadow: 0px 0px 20px 0px rgba(60,80,147,0.25); }

  img.side {display:block; float:right; width:36%; margin:0 0 30px 30px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0px 0px 20px 0px rgba(60,80,147,0.25); -moz-box-shadow: 0px 0px 20px 0px rgba(60,80,147,0.25); box-shadow: 0px 0px 20px 0px rgba(60,80,147,0.25); }

  .big-block { display:flex; flex-wrap:wrap;}
  .big-block div { width:48%; margin:0 1% 30px 1%; padding: 60px; -webkit-border-radius:10px; -moz-border-radius: 10px; border-radius: 10px; }
    .big-block div.color1 { border:3px solid #796bc8; }
    .big-block div.color2 { border:3px solid #ebb615; }
    .big-block div.color3 { border:3px solid #e4544e; }
    .big-block div.color4 { border:3px solid #22b56e; }
      .content-holder .big-block div.color1 h2 { color:#796bc8; }
      .content-holder .big-block div.color2 h2 { color:#ebb615; }
      .content-holder .big-block div.color3 h2 { color:#e4544e; }
      .content-holder .big-block div.color4 h2 { color:#22b56e; }

  .thumbnails { display:flex; flex-wrap:wrap;}
  .thumbnails a { width:23%; display:block; margin:1%; }
  .thumbnails a img { width:100%; -webkit-transition:0.4s; transition:0.4s; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0px 0px 20px 0px rgba(60,80,147,0.25); -moz-box-shadow: 0px 0px 20px 0px rgba(60,80,147,0.25); box-shadow: 0px 0px 20px 0px rgba(60,80,147,0.25); }
  .thumbnails a:hover img { opacity:0.7; }	
    .thumbnails a.gallery { margin:0 1% 60px 1%; text-align: center; font-size: 16px; }
    .thumbnails a.gallery img { margin:0 0 15px 0; }

  .lightbox {	cursor: pointer; 	position: fixed; 	width: 100%;	height: 100%; 	top: 0; 	left: 0; 	-webkit-filter: none; 	z-index: 99999999999; 	background-color:rgb(255,255,255, 0.9); background-color:rgba(255,255,255, 0.9);}
	.lightbox img { display: block; position: absolute; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;}
	.lightbox-loading { 	background: url(scripts/lightbox/loading.gif) center center no-repeat; 	width: 32px; 	height: 32px; 	margin: -16px 0 0 -16px; 	position: absolute; 	top: 50%; 	left: 50%; }
	.lightbox-caption { 	display: none; 	position: absolute; 	left: 0; 	bottom: 0; 	width: 100%; 	text-align: center; 	z-index: 9998; }
	.lightbox-caption p { 	margin: 0 auto; 	max-width: 70%; 	display: inline-block; 	*display: inline; 	*zoom: 1;	padding: 10px; 	color: #fff; 	font-size: 12px; 	line-height: 18px; }
	.lightbox-button { position: absolute; z-index: 9999; background: no-repeat center center; width: 32px; height: 32px; opacity:0.9; -webkit-transition: all 0.4s; -moz-transition:    all 0.4s; -ms-transition:     all 0.4s; transition: 		all 0.4s; }
	.lightbox-button:hover, .lightbox-button:focus { opacity: 1; }
 	.lightbox-close { right: 30px; top: 20px; background-image: url('scripts/lightbox/close.webp'); }
	.lightbox-nav { top: 45%; width:100%; margin-top: -16px; }
	.lightbox-nav-next { width: 20px;  height: 40px; right: 30px; background: url('scripts/lightbox/arrow.webp') no-repeat -12px -2px; }
	.lightbox-nav-prev { left: 30px; width: 20px; height: 40px;  background: url('scripts/lightbox/arrow.webp') no-repeat -8px -54px; }

	.contact-form {display:block; width:100%;}
		.contact-form span {width:100%; line-height:60px; font-size:20px; display:block;}
		select::-ms-expand {display:none;} 
		  .contact-form input, .contact-form textarea{background:#f2fbf5; width:100%; line-height:100%; color:#474747; border:none;
		                                              font-size:18px; padding:15px;  margin:0 0 15px 0; font-family: 'Campton Book', Arial;
													  -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
													  transition:all 0.4s; -moz-transition:all 0.4s; -webkit-transition:all 0.4s; -o-transition:all 0.4s;}
		  .contact-form input:hover, .contact-form input:focus, .contact-form textarea:hover, .contact-form textarea:focus {background-color: #fff;  box-shadow: 5px 5px 15px 0px rgba(126, 99, 99, 0.4); -webkit-box-shadow: 5px 5px 15px 0px rgba(8,8,8,0.4); -moz-box-shadow: 5px 5px 15px 0px rgba(8,8,8,0.4);}
		.contact-form textarea {height:200px;}
		  .contact-form label {display:block; font-size:18px; margin:0 0 15px 0;}
		.contact-form input.gonder {height:75px; border:none; font-family:'Campton SemiBold', Arial; font-size:24px; padding:0; color:#fff; background:#796bc8; margin:0; cursor:pointer;}
		.contact-form input.gonder:hover {background:#e4544e;}	
		  .contact-form input::-webkit-input-placeholder {color:#474747; opacity:1;}
		  .contact-form input:-ms-input-placeholder {color:#474747; opacity:1;}
		  .contact-form input::placeholder {color:#474747;  opacity:1;}
	      .contact-form input:hover::-webkit-input-placeholder {color:#474747; opacity:1;}
		  .contact-form input:hover:-ms-input-placeholder {color:#474747; opacity:1;}
		  .contact-form input:hover::placeholder {color:#474747;  opacity:1;}
		  .contact-form input:focus::-webkit-input-placeholder {color:#474747; opacity:1;}
		  .contact-form input:focus:-ms-input-placeholder {color:#474747; opacity:1;}
		  .contact-form input:focus::placeholder {color:#474747;  opacity:1;}
		  .contact-form textarea:hover::-webkit-input-placeholder {color:#474747; opacity:1;}
		  .contact-form textarea:hover:-ms-input-placeholder {color:#474747; opacity:1;}
		  .contact-form textarea:hover::placeholder {color:#474747;  opacity:1;}
		  .contact-form textarea:focus::-webkit-input-placeholder {color:#474747; opacity:1;}
		  .contact-form textarea:focus:-ms-input-placeholder {color:#474747; opacity:1;}
		  .contact-form textarea:focus::placeholder {color:#474747;  opacity:1;}

.hp-map { display:block; width: 100%; height: 620px; overflow: hidden; }

footer { width:100%; padding:0 60px 90px 60px; background:url(img/footer-overlay.webp) no-repeat center bottom #ffe62c; background-size: 100% auto; border-top:1px solid #fff;  }		 
  .with-border-top {  border-top:10px solid #fff; }

  img.logo-footer { position: relative; z-index: 40; display: block; width:216px; height: 105px; margin:-70px auto 60px auto; }

  footer ul { display:block; float:left; margin:0 60px 0 0; text-align: left; }
    footer ul li { display:block; font-size:15px; color:#383838; line-height:140%; }
      footer ul li b { font-size:20px;  color:#883269; }
      footer ul li a { display:block; color:#383838; }
        footer ul li a:hover { color:#ef272d; }
    footer ul.rights { float:right; margin:0; text-align: right; }
      footer ul.rights li { opacity: 0.7; }
      footer ul.rights img { display:inline-block; width: auto; height: 40px; margin: 0 0 30px 0; }       


.callout { position: fixed; top: 25%; right: 25%; z-index: 20000; width: 50%; height: auto;
  -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(60,80,147,0.9); -moz-box-shadow: 0px 0px 20px 0px rgba(60,80,147,0.9); box-shadow: 0px 0px 20px 0px rgba(60,80,147,0.9);
  background: linear-gradient(-45deg, #23a6d5, #23d5ab, #fadd14, #ee7752);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite; }
  .callout-container { padding: 60px; color: #883269; font-size: 46px; text-align: center; } 
    .closebtn { position: absolute; top: 15px; right: 30px; color: white; font-size: 36px; cursor: pointer; }
    .closebtn:hover { color: lightgrey; }
    @keyframes gradient {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
  




/* responsive css */ 

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

  .swiper-slide img { width:auto; height:100%; }

    .spot-overlay-kids { font-size: 56px; }
      .spot-overlay-kids span { font-size: 36px; }

    .page-header h1 {font-size: 42px; } 
      .page-header.no-bg-img h1 {font-size: 30px;} 
  
  .content-holder h1 { font-size:40px; }
  .content-holder h2 { font-size:34px; }
  
    .content-holder.mobile-app .content { font-size: 40px; }
      .content-holder.mobile-app .content b { font-size: 60px; }
  
    .content-holder.instagram .content { font-size: 40px; }
      .content-holder.instagram .content b { font-size: 60px; }

    img.side {width:30%;}

  .hp-map { height: 520px; }
  
  .callout { right: 20%; width: 60%; }
    .callout-container { font-size: 38px; } 

}

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

  #toTop { bottom:30px; right:30px; }

  .content { width:100%; padding: 0 30px; }
  
    ul.icons-menu.left { left:30px; }  
    ul.icons-menu.right { right:30px; }

  /* mainmenu */
    .links > li > a { font-size:15px;  padding:0 10px; }
  /* mainmenu */

  .callout { right: 13%; width: 74%; }
    .callout-container { font-size: 30px; } 

    .page-header h1 {bottom:30px; } 
    .page-header.no-bg-img h1 {font-size: 26px; } 
  
    .content-holder { padding:60px 0; }
    .content-holder.mobile-app { min-height: 420px; }
    .content-holder.instagram { min-height: 308px; }
      
    .content-holder h1 { font-size:36px; margin:0 0 45px 0; }
    .content-holder h2 { font-size:30px; margin:0 0 15px 0; }
    
    .content-holder p { font-size: 16px; margin:0 0 15px 0;}
      .content-holder p:last-child {margin:0;}
      .content-holder p b.st2 { font-size: 20px;}
    
    a.buttons {width:200px; height:50px; line-height:50px; font-size:16px;}

    .cards a { width:22%; margin:0 4% 30px 0; }
      .cards a:nth-child(4) {margin:0 0 30px 0;}    
        .cards a span label { font-size:20px; }

        .our-services { padding: 15px; }
      .our-services img { width: 120px; margin:0 auto 15px auto ; }
      .our-services h3 { font-size: 18px; }
      .our-services span { min-height: 152px; }
      .our-services.subp span { min-height: 260px; }        

        img.side {width:40%;}
      
        .big-block div { padding: 30px; }      

        footer { padding:0 30px 90px 30px;  }		 
      
        footer ul { margin:0 30px 0 0; }
          footer ul li { font-size:14px;  }
            footer ul li b { font-size:18px;  }
      
	}

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

  .callout { right: 20%; width: 60%; }
    .callout-container { font-size: 26px; } 

  html, body { height:auto; }

/* animated header style */

.cbp-af-header { height:152px; }

  ul.icons-menu { height: 36px; top:22px; }
    ul.icons-menu li a { width:36px; height:36px;  }
      ul.icons-menu li a.home { margin: 0 5px 0 0; } 
      ul.icons-menu li a.phone { margin: 0 5px 0 0; } 
      ul.icons-menu li a.email { margin: 0 5px 0 0; } 
      ul.icons-menu li a.location { margin: 0 0 0 5px; } 
      ul.icons-menu li a.ig { margin: 0 0 0 5px; } 
      ul.icons-menu li a.fb { margin: 0 0 0 5px; } 
        ul.icons-menu li a.home:hover, ul.icons-menu li a.phone:hover, ul.icons-menu li a.email:hover, ul.icons-menu li a.location:hover, ul.icons-menu li a.ig:hover, ul.icons-menu li a.fb:hover { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); } 

  a.logo { width:190px; height:90px; margin:10px auto 2px auto; background-size: 100% 100%; }
    a.logo:hover { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); }

  .hdr-wht-bx { height:80px; }

  #mainmenu {display:block; width:100%; height:50px; }

	.links {display:none; opacity:0; width:100%; padding:0; position:absolute; right:0; z-index:5001;}
	.links > li {display:block; width:100%; margin:0;}
	.links > li > a {display:block; width:100%; text-decoration:none; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
	.toggle {display:block; position:relative; cursor:pointer; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;}
	#toggle:checked + div .links {display:block; opacity:1;}
	
	.links {color:#883269; background-color: rgb(252,227,46,0.75); background-color: rgba(252,227,46,0.75); overflow:hidden;}
	.links, .links > li, .links > li > a {height:auto; color:#883269;}
	.links > li > a {padding:0; margin:0; line-height:40px; color:#883269; font-size:18px; text-align:center; padding:0; border-bottom:1px solid #883269;}
	.links > li > a:hover, .links > li > a:focus, .links > li > a.active {background:#fff; color:#44ad4e; border-bottom:1px solid #fff;}
	.links > li:last-child > a {border-bottom:none;}
		
	.toggle:after {content:attr(data-open); background:url(img/menu.webp) no-repeat center center; display:block; height:50px; width:100%; margin:0; padding:0; text-align:left; text-indent:-9999px; -webkit-transition:all 0.4s; -moz-transition:all 0.4s; -o-transition:all 0.4s; transition:all 0.4s;}
	.toggle:hover:after {background:url(img/menu.webp) no-repeat center;}
	#toggle:checked + div .toggle:after {content:attr(data-close);}
      .toggle {z-index:2;}

  /* transitions and class for reduced height */
  .cbp-af-header.cbp-af-header-shrink { top:-102px; transition:all 0.4s; -moz-transition:all 0.4s; -webkit-transition:all 0.4s; -o-transition:all 0.4s; }    
    .cbp-af-header.cbp-af-header-shrink  a.logo { opacity: 0; }
    
/* animated header style */

/* spot style */

.spot { height:auto; padding: 80px 0 0 0;}  

 .swiper-slide img { display:block; width:100%; height:auto; }

  .spot-overlay-kids { height:200px; bottom:-30px; font-size: 40px; }
    .spot-overlay-kids span { font-size: 24px; }

/* spot style */

.page-header {padding:80px 0 0 0;}
  .page-header h1 {font-size: 26px; } 
  .page-header.no-bg-img {padding:182px 0 30px 0; }
  .page-header.no-bg-img h1 {font-size: 22px;} 

.content-holder.doodles { min-height: 200px; background: url(img/hp-bg-welcome.webp) no-repeat center bottom; background-size: 160% auto; }
.content-holder.mobile-app { min-height: 100px; padding:90px 0; background: url(img/hp-bg-app.webp) no-repeat right -200px bottom; background-size:cover; }
.content-holder.instagram { min-height: 100px; padding:90px 0; background: url(img/hp-bg-instagram.webp) no-repeat left -260px  bottom; background-size:cover;  }
  
  .content-holder.mobile-app .content { font-size: 24px;  }
    .content-holder.mobile-app .content b { font-size: 42px; }
    .mobile-app-buttons { width: 360px; height: 50px; margin: 30px auto 0 auto; }
    .mobile-app-buttons img { width: 150px; height: auto; margin: 0 15px;  }

  .content-holder.instagram .content { font-size: 30px;  }
    .content-holder.instagram .content b { font-size: 42px; }
    a.instagram-button {width:158px; height:46px; }
  
    .cards a { width:46%; margin:0 2% 30px 2%;  }
      .cards a:nth-child(4) {margin:0 2% 30px 2%;}    
     
      .thumbnails a { width:46%; margin:2%; }
        .thumbnails a.gallery { margin:0 2% 30px 2%; font-size: 15px; }
        .thumbnails a.gallery img { margin:0 0 15px 0; }
    
      .our-services span { min-height: 198px; }
      .our-services.subp { width: 46%; margin: 0 2% 30px 2%; }
      .our-services.subp span { min-height: 252px; }

	}

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

    .callout-container { font-size: 22px; } 

    .spot-overlay-kids { height:180px; font-size: 32px; }
    .spot-overlay-kids span { font-size: 24px; }

  .big-block div { width:100%; margin:0 0 30px 0; padding: 30px; }

  .hp-map { height: 380px; }

  .content-holder h1 { font-size:28px; margin:0 0 30px 0; }
  .content-holder h2 { font-size:26px; margin:0 0 15px 0; }
  
  .content-holder p { font-size: 16px; margin:0 0 15px 0;}
    .content-holder p b.st2 { font-size: 18px; }
   
    .our-services img { width: 100px; margin:0 auto 15px auto ; }
    .our-services span { min-height: 162px; }
    .our-services.subp { width: 46%; margin: 0 2% 30px 2%; }
    .our-services.subp span { min-height: 234px; }

  footer ul { width:50%; margin:0 0 30px 0; text-align: left; }
    footer ul li { font-size:14px; }
      footer ul li b { font-size:18px; }
    footer ul.rights { float:left; margin:0 0 30px; text-align: left; }
      footer ul.rights li { opacity: 0.7; }
      footer ul.rights img { display:inline-block; width: auto; height: 40px; margin: 0 0 30px 0; }       

	}

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

  .spot-overlay-kids { height:120px; font-size: 24px; }
  .spot-overlay-kids span { font-size: 20px; }

  .page-header {padding:152px 0 0 0;}
  .page-header h1 {font-size: 22px; } 
  .page-header.no-bg-img {padding:182px 0 30px 0; }
  .page-header.no-bg-img h1 {font-size: 20px;} 

  .our-services span { min-height: 180px; }
  .our-services.subp { float: none; width: 100%; margin: 0 0 30px 0; }
  .our-services.subp span { min-height: 10px; height:auto; }

  img.side {float:none; width:100%; margin:0 0 30px 0; }

  .content-holder.doodles { background-size: 300% auto; border-bottom:2px solid #fadd16; }
.content-holder.mobile-app { padding: 60px 30px; background-color:#a94edd; background-image:none; }
.content-holder.instagram {padding: 60px 30px; background: url(img/hp-bg-instagram.webp) no-repeat bottom right; background-size:cover; }
  
.cards a { width:100%; margin:0 0 30px 0;  }
.cards a:nth-child(4) {margin:0 0 30px 0;}    
     
.thumbnails a { width:100%; margin:0 0 30px 0; }

  footer { padding:0 30px 30px 30px;  }		 
  .with-border-top {  border-top:5px solid #fff; }
  img.logo-footer { width:185px; height: 90px; margin:-60px auto 30px auto; }

  footer ul { float:none; width:100%; margin:0 0 30px 0; text-align: center; }
    footer ul.rights { float:none; margin:0 0 30px; text-align: center; }
      footer ul.rights img { display:inline-block; width: auto; height: 36px; margin: 0 0 20px 0; }       
      footer ul li a { border-bottom: 1px dotted #383838; }

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

  .callout { right: 5%; width: 90%; }
  .callout-container { font-size: 18px; } 


  .cbp-af-header { height:130px; }

  ul.icons-menu { height: 30px; top:22px; }
  ul.icons-menu.left { left:15px; }  
  ul.icons-menu.right { right:15px; }
  ul.icons-menu li a { width:30px; height:30px;  }
      ul.icons-menu li a.home { margin: 0 3px 0 0; } 
      ul.icons-menu li a.phone { margin: 0 3px 0 0; } 
      ul.icons-menu li a.email { margin: 0 3px 0 0; } 
      ul.icons-menu li a.location { margin: 0 0 0 3px; } 
      ul.icons-menu li a.ig { margin: 0 0 0 3px; } 
      ul.icons-menu li a.fb { margin: 0 0 0 3px; } 

  a.logo { width:105px; height:50px; margin:15px auto 15px auto; }

  /* transitions and class for reduced height */
  .cbp-af-header.cbp-af-header-shrink { top:-80px; }
    
  .content { width:100%; padding: 0 15px; }

  
    .content-holder { padding:40px 0; }
    footer { padding:0 15px 30px 15px;  }		 

    .content-holder.mobile-app { padding: 30px 15px; }
    .content-holder.instagram {padding: 30px 15px; }

    .mobile-app-buttons { width: 260px; height: auto; margin: 30px auto 0 auto; }
    .mobile-app-buttons img { width: 100px; height: auto; margin: 0 15px;  }
  
    
  .content-holder.mobile-app .content { font-size: 26px;  }
  .content-holder.mobile-app .content b { font-size: 30px; }

.content-holder.instagram .content { font-size: 22px; }
  .content-holder.instagram .content b { font-size: 36px; ; }

  .page-header {padding:130px 0 0 0;}
  .page-header h1 {font-size: 20px; } 
  .page-header.no-bg-img {padding:152px 0 30px 0; }
  .page-header.no-bg-img h1 {font-size: 18px;} 

}