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

html, body { height:100%; }

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

* { margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
a { color:#ff148d;  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:#0890d4;  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: 'poppinssemibold', Arial; font-weight: normal; }
.content { width:1280px; margin:0 auto; position: relative; }
.clear { clear:both; }
#toTop { display:none; width:40px;  height:40px;  background:url(img/totop.webp) no-repeat center #dd127b;  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:290px; transition:all 0.4s; -moz-transition:all 0.4s; -webkit-transition:all 0.4s; -o-transition:all 0.4s; }
  
  .logo-cloud { display:block; width: 48.8%; height: 290px; padding: 30px 0 0 0; margin: 0; opacity: 1; 
                transition:all 0.4s; -moz-transition:all 0.4s; -webkit-transition:all 0.4s; -o-transition:all 0.4s; }
    .logo-cloud.train { float:left; background: url(img/bg-cloud-1.webp) no-repeat center top; background-size: 100% 100%; }
    .logo-cloud.boat { float:right; background: url(img/bg-cloud-2.webp) no-repeat center top; background-size: 100% 100%; }

    a.logo { display:block; width:300px; height:110px; margin:0 auto 20px auto; opacity: 1; text-align:left; text-indent:-9999px; }
      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); }
        a.logo.train { background: url(img/logo-oyun-treni.webp) no-repeat center center; background-size: 100% 100%; }
        a.logo.boat { background: url(img/logo-oyun-gemisi.webp) no-repeat center center; background-size: 100% 100%; }
  
    ul.icons-menu { display:block; width: 210px; height: 32px; margin: 0 auto; }
      ul.icons-menu li { display:inline; }
        ul.icons-menu li a { display:block; float:left; width:32px; height:32px; margin: 0 5px; text-align:left; text-indent:-9999px; }
          ul.icons-menu li a.phone { background: url(img/icon/phone.webp) no-repeat center center; background-size: 100% 100%; } 
          ul.icons-menu li a.email { background: url(img/icon/email.webp) no-repeat center center; background-size: 100% 100%; } 
          ul.icons-menu li a.location { background: url(img/icon/location.webp) no-repeat center center; background-size: 100% 100%; } 
          ul.icons-menu li a.ig { background: url(img/icon/ig.webp) no-repeat center center; background-size: 100% 100%; } 
          ul.icons-menu li a.fb { background: url(img/icon/fb.webp) no-repeat center center; background-size: 100% 100%; } 
            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); } 

  /* mainmenu */
    #mainmenu { width: 100%; height: 60px; padding: 10px 0; background-color: rgb(238,42,143,0.7); background-color: rgba(238,42,143,0.7);
                position: absolute; bottom:10px; left:0; 
                -webkit-border-radius: 30px;  -moz-border-radius: 30px;  border-radius: 30px;
                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:18px;   color:#fff; line-height:40px; font-family: 'dynapuffregular', Arial; padding:0 10px; -webkit-border-radius: 20px;  -moz-border-radius: 20px;  border-radius: 20px; }
        .links > li > a:hover, .links > li > a:focus, .links > li > a.active { color:#dd127b;  background:#fff; }
      .toggle { z-index:2; }
    /* mainmenu */

  /* transitions and class for reduced height */
  .cbp-af-header.cbp-af-header-shrink { top:-210px; 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 .logo-cloud { 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:540px; padding: 227px 0 0 0; background: url(img/spot/overlay-02.webp) no-repeat center bottom; background-size: 100% auto; position:absolute; bottom:0; left:0; z-index:8; }
      .spot-overlay-color .content { height:235px; padding: 80px 0 0 0;  background: url(img/spot/overlay-01.webp) no-repeat center bottom; background-size: auto 100%; font-size: 48px; color:#fff; font-family: 'dynapuffregular', Arial; text-align: center; line-height: 120%; text-shadow: 3px 3px 12px #5f5f5b;  }
      .spot-overlay-color .content i { font-size: 30px; }

/* spot style */

.page-header {display:block; width:100%; 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: 'dynapuffregular', Arial; text-align: center; line-height: 100%; text-shadow: 3px 3px 12px #5f5f5b; } 

.content-holder { width:100%; padding:120px 0; } .sixty { padding: 60px 0;}
  .content-holder.doodles { background: url(img/pattern-bg.webp) no-repeat center bottom; background-size: 100% auto; }
  .content-holder.social-accounts { min-height: 648px; background: url(img/hp-bg-instagram.webp) no-repeat center bottom; background-size:cover;  position: relative;
      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.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.green { background-color: #85c226; padding: 90px 60px; position: relative;}

  .content-holder h1 { font-size:34px; color:#ff148d; font-family: 'dynapuffregular', Arial; line-height: 130%; margin:0 0 60px 0; }
    .content-holder h1 span { font-size:54px;  }
    .sixty h1 { font-size:30px; margin:0 0 30px 0; }
  .content-holder h2 { display: block; width: 100%; height:130px; padding: 36px 0 0 0; font-size:36px; color:#dd127b; font-family: 'dynapuffregular', Arial; line-height: 94px; margin:0 0 24px 0; background: url(img/boat.webp) no-repeat center right; background-size: auto 130px; }

  .content-holder p { color:#474747; font-size: 17px; line-height:140%; margin:0 0 30px 0; }
    .centered { text-align:center; }
    .content-holder p:last-child {margin:0; }

  a.buttons {display:block; width:240px; height:60px; line-height:60px; text-align:center; font-size:18px; font-family: 'dynapuffregular', Arial; color:#fff; background:#dd127b; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
    a.buttons:hover {background:#ffcb26; color:#dd127b; }

  .content-holder.doodles .content { padding:0 640px 0 0; min-height: 528px; background: url(img/doodle.webp) no-repeat center right; background-size: 640px auto; }
  .content-holder.doodles .content p b { font-size: 20px; line-height:150%; }

  .content-holder.social-accounts .content h1 { font-size:42px; color:#fff; margin:0 0 -32px 0; text-align: center; }
    img.pattern-bg-part-2 { position: absolute; top:0; left:0; width: 100%; height: auto; }
    .social-accounts-cloud { display:block; float: left; width: 50%; height: 400px; padding: 86px 0 0 0; margin: 0; background: url(img/sa-bg-cloud.webp) no-repeat center; background-size: 100% 100%; }
      .social-accounts-cloud img { display: block; width: auto; height: 60px; margin:0 auto; }

      a.sa-button { display:block; width:390px; height:60px; padding:0 0 0 72px; line-height: 60px; font-size: 18px; font-family: 'poppinssemibold', Arial; margin:20px auto 0 auto; text-align:left; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; }
        a.sa-button.instagram { background: url(img/icon/ig.webp) no-repeat center left 20px; color:#d13e75; border:2px solid #d13e75; }
          a.sa-button.instagram:hover { background: url(img/icon/ig.webp) no-repeat center left 20px #d13e75; color:#fff; }
        a.sa-button.facebook { background: url(img/icon/fb.webp) no-repeat center left 20px; color:#3b5998; border:2px solid #3b5998; }
          a.sa-button.facebook:hover { background: url(img/icon/fb.webp) no-repeat center left 20px #3b5998; color:#fff; }

  .our-services { display:flex; flex-wrap:wrap; }
    .our-services a { display:block; width: 16.666%; padding: 0 30px; }
      .our-services a img { display:block; width: 90%; height: auto; margin:0 auto 15px auto ; }
        .our-services a h3 { text-align: center; font-size: 22px; line-height: 120%; font-family: 'dynapuffregular', Arial; }
          .oshc1 { color:#1b439b; }
          .oshc2 { color:#fdab31; }
          .oshc3 { color:#e68286; }
          .oshc4 { color:#6aa93b; }
          .oshc5 { color:#ea0042; }
          .oshc6 { color:#2e2d2d; }
         
  .content-holder.mobile-app .content { font-size: 32px; color:#145b20; font-family: 'poppinsmedium', Arial; line-height: 120%; }
    .content-holder.mobile-app .content b { font-size: 50px; color:#dd127b; font-family: 'dynapuffregular', Arial; line-height: 140%; font-weight: normal; }
    .mobile-app-buttons { display:flex; flex-wrap:wrap; width: auto; height: 54px; margin: 30px 0 0 0; }
      .mobile-app-buttons img { width: auto; height: 54px; margin: 0 30px 0 0; 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.long-train { background: url(img/train.webp) no-repeat left bottom; background-size: auto 157px; padding: 0 0 38px 0; }
    .content.long-train a.buttons { float:right; margin: 30px 0 0 0; }

    .cards { display:flex; flex-wrap:wrap; }
    .cards a { width:21.484375%; margin:0 4.6875% 30px 0; }
      .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); }	
      .cards a img {display:block; width:100%; height:auto; -webkit-border-radius:20px; -moz-border-radius: 20px; border-radius: 20px; transition:all 0.4s; -moz-transition:all 0.4s; -webkit-transition:all 0.4s; -o-transition:all 0.4s; }   
      .cards a span { display: block; padding: 20px 20px 0 20px; font-size:24px; line-height: 120%; color:#dd0e78; font-family: 'poppinssemibold', Arial;  transition:all 0.4s; -moz-transition:all 0.4s; -webkit-transition:all 0.4s; -o-transition:all 0.4s; }
      .cards a:hover span { color:#0890d4; }	

  img.white-fade-up { position: absolute; top:0; left:0; width: 100%; height: 90px; }
  img.white-fade-down { position: absolute; bottom:-3px; left:0; width: 100%; height: 90px; }

  .map-holder { display:block; width: 48.4375%; height: 560px; overflow: hidden; background-color: #fff; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.15); -moz-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.15); box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.15); position: relative; }
    .map-holder.train { float:left; }
    .map-holder.boat { float:right; }
      .map-holder div { display: block; width: auto; padding: 30px; background-color: rgb(255,255,255,0.9); background-color: rgba(255,255,255,0.9); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.15); -moz-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.15); box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.15); position: absolute; top:30px; left:30px; z-index: 2;}
      .map-holder div img { display: block; width: 150px; height: auto; margin: 0 0 15px 0; }
      .map-holder div p { color:#3b5998; line-height: 150%; font-size: 16px; }
      .map-holder iframe { display:block; width: 100%; height: 560px; overflow: hidden; }

  img.full {display:block; width:100%; margin:0 0 30px 0; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -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; }
     .prpi { -webkit-border-radius: 100%;  -moz-border-radius: 100%;  border-radius: 100%; border:5px solid #fff; -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);}

  .pink-frame { display:block; width: 100%; height: auto; padding: 30px; border:1px solid #ff148d; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; }
  .dcf-1 { border:1px solid #1b439b; } .dcf-1 h1 { color:#1b439b; }
  .dcf-2 { border:1px solid #fdab31; } .dcf-2 h1 { color:#fdab31; }
  .dcf-3 { border:1px solid #e68286; } .dcf-3 h1 { color:#e68286; }
  .dcf-4 { border:1px solid #6aa93b; } .dcf-4 h1 { color:#6aa93b; }
  .dcf-5 { border:1px solid #ea0042; } .dcf-5 h1 { color:#ea0042; }
  .dcf-6 { border:1px solid #2e2d2d; } .dcf-6 h1 { color:#2e2d2d; }
  .dcf-7 { border:1px solid #883269; } .dcf-7 h1 { color:#883269; }
  .pink-frame img.side {width:24%; margin:0 0 0 30px; }
    .left {float:left; width: 48%;}
    .right {float:right; width: 48%;}
    .pink-frame iframe { display:block; width: 100%; height: 460px; margin: 0 0 30px 0; overflow: hidden;  -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.15); -moz-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.15); box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.15); }


  .thumbnails { display:flex; flex-wrap:wrap; }
  .thumbnails a { width:21%; display:block; margin:2%; }
  .thumbnails a img { width:100%; -webkit-transition:0.4s; transition:0.4s;  -webkit-border-radius:20px; -moz-border-radius: 20px; border-radius: 20px; -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; }	

  .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:18px; display:block; }
		select::-ms-expand {display:none; } 
		  .contact-form input, .contact-form textarea{background:#ffe1f0; width:100%; line-height:100%; color:#474747; border:none;
		                                              font-size:18px; padding:15px;  margin:0 0 15px 0; font-family: 'poppinsregular', Arial;
													  -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;
													  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: #ff148d; }
		.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: 'poppinsregular', Arial; font-size:24px; padding:0; color:#fff; background:#0890d4; margin:0; cursor:pointer; }
		.contact-form input.gonder:hover {background:#60b02b; }	
		  .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:#fff; opacity:1; }
		  .contact-form input:hover:-ms-input-placeholder {color:#fff; opacity:1; }
		  .contact-form input:hover::placeholder {color:#fff;  opacity:1; }
		  .contact-form input:focus::-webkit-input-placeholder {color:#fff; opacity:1; }
		  .contact-form input:focus:-ms-input-placeholder {color:#fff; opacity:1; }
		  .contact-form input:focus::placeholder {color:#fff;  opacity:1; }
		  .contact-form textarea:hover::-webkit-input-placeholder {color:#fff; opacity:1; }
		  .contact-form textarea:hover:-ms-input-placeholder {color:#fff; opacity:1; }
		  .contact-form textarea:hover::placeholder {color:#fff;  opacity:1; }
		  .contact-form textarea:focus::-webkit-input-placeholder {color:#fff; opacity:1; }
		  .contact-form textarea:focus:-ms-input-placeholder {color:#fff; opacity:1; }
		  .contact-form textarea:focus::placeholder {color:#fff;  opacity:1; }

footer { display: block; width:100%; min-height: 346px; padding:0 0 200px 0; background:url(img/bg-footer-1.webp) no-repeat center bottom; background-size: 100% auto; }		 
.f-top { display:block; width:100%; height: 190px; background: url(img/bg-footer-2.webp) repeat bottom right; margin: 0 0 60px 0; }

  img.logo-footer { display:block; float: left; width: auto; height:114px; margin: 33px 0 0 0; }

  .f-top .mobile-app-buttons { display:block; float: right; width: auto; height: 40px; margin: 70px 0 0 0; }
  .f-top .mobile-app-buttons img { height: 40px; margin: 0 0 0 10px; }

  footer ul { display:block; float:left; margin:0 60px 0 0; text-align: left; }
    footer ul li { display:block; font-size:15px; color:#757575; line-height:140%; }
      footer ul li b { font-size:20px; color:#dd127b; font-family: 'dynapuffregular', Arial; }
      footer ul li a { display:block; color:#757575; }
        footer ul li a:hover { color:#dd127b; }
    footer ul.rights { float:right; margin:0; text-align: right; font-size:14px; color:#dd137b; }
      footer ul.rights li { opacity: 0.5; color:#dd137b; }
      footer ul.rights li a { color:#dd137b; }
      footer ul.rights li:hover { opacity: 1; }

      
/* 

.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) {

  #toTop { bottom:40px; right:40px;  }
  
  .swiper-slide img { width:auto; height:100%; }
      .spot-overlay-color { height:440px; padding: 127px 0 0 0; }
        .spot-overlay-color .content { font-size: 48px; }
        .spot-overlay-color .content i { font-size: 28px; }

  .page-header { height:430px; 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; }
    .page-header img {width:auto; height:430px; }
    .page-header h1 {font-size: 44px; } 
  
  .content-holder { padding:90px 0; } .sixty { padding: 60px 0;}
    .content-holder.green { padding: 90px 30px;}
  
    .content-holder h1 { font-size:32px; }
      .content-holder h1 span { font-size:50px;  }
      .sixty h1 { font-size:28px; }
    .content-holder h2 { font-size:34px; }
  
}

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

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

  .content { width:100%; padding:0 30px; }

/* animated header style */

.cbp-af-header { height:250px; }
  
  .logo-cloud {  width: 49%; height: 240px; padding: 15px 0 0 0; }

    a.logo { width:245px; height:90px; margin:0 auto 15px auto;  }
  
  /* mainmenu */
    #mainmenu { width: 98%; left:1%;  }
        .links > li > a { font-size:15px; padding: 0 8px; }
    /* mainmenu */

  /* transitions and class for reduced height */
  .cbp-af-header.cbp-af-header-shrink { top:-160px; }
    
/* animated header style */
  
  .spot-overlay-color { height:240px; padding:0; background-size: 100% auto; }
  .spot-overlay-color .content { height:180px; padding: 40px 0 0 0; font-size: 38px; bottom:0;  }
  .spot-overlay-color .content i { font-size: 24px; }

  .page-header {height:360px; 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; }
  .page-header img {width:auto; height:100%; }
  .page-header h1 {bottom:30px; font-size: 36px; } 

  .content-holder.doodles .content { padding:0 50% 0 30px; min-height: 528px; background: url(img/doodle.webp) no-repeat center right 30px; background-size: 50% auto; }
  .content-holder.doodles .content p b { font-size: 18px; }

  .content-holder.social-accounts .content h1 { font-size:36px; }
    .social-accounts-cloud { height: 380px; padding: 80px 0 0 0; }
      .social-accounts-cloud img { height: 50px; }
      a.sa-button { width:80%; padding:0 0 0 62px; font-size: 16px; }

    .our-services a { padding: 0 15px; }
        .our-services a h3 { font-size: 18px; }
         
  .content-holder.mobile-app .content { font-size: 22px; }
    .content-holder.mobile-app .content b { font-size: 40px; }
    .mobile-app-buttons { height: 40px; }
      .mobile-app-buttons img { height: 40px; }

    .content.long-train { background-size: auto 120px; padding: 0 30px 38px 30px; }

      .cards a span { padding: 15px 15px 0 15px; font-size:18px;  }	

  img.white-fade-up { height: 60px; }
  img.white-fade-down { height: 60px; }

  .map-holder { height: 480px; }
      .map-holder div img { width: 140px; }
      .map-holder iframe { height: 480px; }

  img.side {width:30%;}

  .pink-frame { padding: 20px; }
  .pink-frame img.side {width:22%; }
    .pink-frame iframe { height: 400px; }

footer { min-height: 306px; padding:0 0 160px 0; }		 

  .f-top .mobile-app-buttons { height: 40px; margin: 70px 0 0 0; }
  .f-top .mobile-app-buttons img { height: 40px; margin: 0 0 0 10px; }

  footer ul { margin:0 45px 0 0; }
      footer ul li b { font-size:18px; }
    footer ul.rights { font-size:14px; }

	}

@media only screen and (max-width: 1000px) {
  
  #mainmenu { display:block; height: 50px; padding: 0; -webkit-border-radius: 25px;  -moz-border-radius: 25px;  border-radius: 25px; }

	.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:#fff; padding:13px 15px; background-color: rgb(238,42,143,0.7); background-color: rgba(238,42,143,0.7); overflow:hidden; -webkit-border-radius: 25px;  -moz-border-radius: 25px;  border-radius: 25px; }
	.links, .links > li, .links > li > a {height:auto; color:#fff; }
	.links > li > a {padding:0; margin:0; line-height:40px; color:#fff; margin: 1px 0; font-size:18px; text-align:center; padding:0; border:1px solid #883269; }
	.links > li > a:hover, .links > li > a:focus, .links > li > a.active {background:#fff; color:#dd127b; border:1px solid #fff; }
		
	.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:-170px; transition:all 0.4s; -moz-transition:all 0.4s; -webkit-transition:all 0.4s; -o-transition:all 0.4s; }    
  
  .content-holder { padding:60px 0; }
  .sixty { padding: 60px 0;}
  .content-holder.social-accounts { min-height: 10px;  }
  .content-holder.mobile-app { min-height: 10px; }
  .content-holder.green { padding:60px 30px; }

  .content-holder h1 { font-size:26px; margin:0 0 30px 0; }
    .content-holder h1 span { font-size:38px;  }
    .sixty h1 { font-size:24px; margin:0 0 30px 0; }
  .content-holder h2 { height:100px; padding: 35px 0 0 0; font-size:30px; line-height: 30px; margin:0 0 24px 0; background: url(img/boat.webp) no-repeat center right; background-size: auto 100px; }

  .content-holder p { font-size: 16px; }

  a.buttons {font-size:16px; }

  .content-holder.doodles .content { padding:0 30px 700px 30px; min-height: 10px; background: url(img/doodle.webp) no-repeat center bottom; background-size: 786px auto; }
  .content-holder.doodles .content p b { font-size: 18px; line-height:140%; }

  a.sa-button { height:50px; padding:0 15px 0 55px; line-height: 50px; font-size: 15px; margin:15px auto 0 auto; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; }
  a.sa-button.instagram { background: url(img/icon/ig.webp) no-repeat center left 15px; color:#d13e75; }
    a.sa-button.instagram:hover { background: url(img/icon/ig.webp) no-repeat center left 15px #d13e75; }
  a.sa-button.facebook { background: url(img/icon/fb.webp) no-repeat center left 15px; color:#3b5998; }
    a.sa-button.facebook:hover { background: url(img/icon/fb.webp) no-repeat center left 15px #3b5998; }

    .content-holder.mobile-app .content { font-size: 20px; }
    .content-holder.mobile-app .content b { font-size: 30px; }

    .content.long-train { background-size: auto 90px; background-position: left 30px bottom; padding: 0 30px; }

      .cards a span { padding: 15px 15px 0 15px; font-size:18px;  }	

      img.white-fade-up { height: 60px; }
      img.white-fade-down { height: 60px; }
    
      .map-holder { width: 100%; height: 420px;  }
      .map-holder.train { float:none; margin:0 0 30px 0; }
      .map-holder.boat { float:none; }
        .map-holder iframe { height: 420px; }
  
        .pink-frame { padding: 30px;  }
        .pink-frame img.side {width:20%; }
          .left {float:none; width: 100%; margin:0 0 30px 0;}
          .right {float:none; width: 100%;}
          .pink-frame iframe { height: 400px; }
      
        footer { min-height: 10px; padding:0 0 90px 0; }		 
        .f-top { height: 100px; background: url(img/bg-footer-2.webp) repeat bottom right; background-size: auto 100px; margin: 0 0 30px 0; }
        
          img.logo-footer { height:100px; margin:0; }
        
          .f-top .mobile-app-buttons { height: 40px; margin: 30px 0 0 0; }
          .f-top .mobile-app-buttons img { height: 40px; margin: 0 0 0 10px; }
        
          footer ul { margin:0 0 30px 0; width: 33.33%; }
          footer ul li { text-align: center; }
          footer ul li b { text-align: center; }
          footer ul li a { text-align: center; }
            
            footer ul.rights { width: 100%; float:none; clear: both; margin:0; text-align: center; font-size:12px; }

	}

@media only screen and (max-width: 860px) {
     
.cbp-af-header { height:180px; }
  
.logo-cloud { width: 50%; height: 180px; padding: 15px 0 0 0; margin: 0; }
  .logo-cloud.train { background: url(img/bg-cloud-1.webp) no-repeat center top; background-size: 100% 100%; }
  .logo-cloud.boat { background: url(img/bg-cloud-2.webp) no-repeat center top; background-size: 100% 100%; }

  a.logo { width:164px; height:60px; }
    a.logo:hover { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); }

    #mainmenu { bottom:0; }

  ul.icons-menu { width: 180px; height: 30px;}
      ul.icons-menu li a { width:30px; height:30px; margin: 0 3px; }
          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); } 

/* transitions and class for reduced height */
.cbp-af-header.cbp-af-header-shrink { top:-120px; }    


/* spot style */

.spot { height:600px; }  
    .swiper-slide img { width:auto; height:100%; }
    .spot-overlay-color { height:180px; padding:0; }
      .spot-overlay-color .content { height:120px; padding: 40px 0 0 0; font-size:26px;  }
      .spot-overlay-color .content i { font-size: 20px; }

/* spot style */

.page-header {height:300px; }
.page-header h1 {bottom:30px; font-size: 30px; } 

  .content-holder h1 { font-size:24px; }
  .content-holder h1 span { font-size:30px;  }
  .sixty h1 { font-size:22px;}
.content-holder h2 { height:90px; padding: 30px 0 0 0; background: url(img/boat.webp) no-repeat center right; background-size: auto 90px; }

.content-holder p { font-size: 16px; }

  .content-holder.doodles .content { padding:0 30px 500px 30px; background: url(img/doodle.webp) no-repeat center bottom; background-size: 600px auto; }
  .content-holder.doodles .content p b { font-size: 16px; line-height:140%; }


  .content-holder.social-accounts .content h1 { font-size:28px; margin:0; }
    .social-accounts-cloud { float: none; width: 100%; height: auto; padding: 75px 60px 90px 60px; margin:0; background: url(img/sa-bg-cloud.webp) no-repeat center; background-size: 100% 100%; }
      .social-accounts-cloud img { display: block; width: auto; height: 60px; margin:0 auto; }

      .our-services a { width: 33.333%; padding: 0 15px; margin: 0 0 30px 0; }
        .our-services a img { width: 60%; height: auto; margin:0 auto 15px auto ; }

        .content-holder.mobile-app { min-height: 699px; padding:120px 0 400px 0; background: url(img/hp-bg-app-mobile.webp) no-repeat center bottom; background-size:cover; }
        .content-holder.mobile-app .content { text-align: center; }
       
        .mobile-app-buttons { width: 260px; height: 40px; margin: 30px auto 0 auto; }
        .mobile-app-buttons img { width: 120px; height: 40px; margin: 0 5px; }
  
        .cards a { width:46%; margin:0 2% 30px 2%; }
          .cards a:nth-child(4) {margin:0 2% 30px 2%; }    
          .cards a:hover { transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); }	
          
          img.side {width:45%; }
          .pink-frame img.side {width:45%; margin:0 0 0 30px; }

          .content.long-train { background-size: auto 50px; background-position: left 30px bottom; padding: 0 30px; }

          footer { padding:0 0 60px 0; }		 
          .f-top { height: auto; padding: 0 0 30px 0;  background: url(img/bg-footer-2.webp) repeat-x bottom right; background-size: auto 70px; margin: 0 0 30px 0; }
          
            img.logo-footer { display: block; float: none; width:232px ; height:70px; margin:0 auto; }
          
            .f-top .mobile-app-buttons { display: block; float: none; width: 264px; height: 40px; margin: 15px auto 0 auto; padding: 0; }
            .f-top .mobile-app-buttons img { width: 120px; height: 40px; margin: 0 5px; padding: 0; }
          
            footer ul { margin:0 0 30px 0; width: 100%; }
            footer ul li { text-align: center; }
            footer ul li b { text-align: center; }
            footer ul li a { text-align: center; border-bottom: 1px dashed #3b5998; }
              
              footer ul.rights { width: 100%; float:none; clear: both; margin:0; text-align: center; font-size:12px; }

              .thumbnails a { width:46%; margin:2%; }

	}

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

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

  .content { padding:0 15px; }
     
  .cbp-af-header { height:155px; }
  
  .logo-cloud { height: 155px; padding: 10px 0 0 0; }

  a.logo { width:136px; height:50px; }

  ul.icons-menu { width: 150px; height: 30px;}
      ul.icons-menu li a { width:24px; height:24px; margin: 0 3px; }
      #mainmenu { height: 40px; -webkit-border-radius: 20px;  -moz-border-radius: 20px;  border-radius: 20px; }
      .toggle:after {height:40px; }
/* transitions and class for reduced height */
.cbp-af-header.cbp-af-header-shrink { top:-105px; }    

/* spot style */

.spot { height:500px; }  
    .swiper-slide img { width:auto; height:100%; }
    .spot-overlay-color { height:160px; padding:0; }
      .spot-overlay-color .content { height:100px; padding: 30px 0 0 0; font-size:22px;  }
      .spot-overlay-color .content i { font-size: 17px; }

/* spot style */


.content-holder { padding:30px 0; }
.sixty { padding: 30px 0;}
.content-holder.green { padding:30px 15px; }

.content-holder h1 { font-size:22px; margin:0 0 15px 0; }
  .content-holder h1 span { font-size:26px;  }
  .sixty h1 { font-size:22px; margin:0 0 15px 0; }
.content-holder h2 { height:60px; padding: 15px 0 0 0; font-size:24px; margin:0 0 15px 0; background: url(img/boat.webp) no-repeat center right; background-size: auto 60px; }

.content-holder.doodles .content { padding:0 15px 360px 15px; min-height: 10px; background: url(img/doodle.webp) no-repeat center bottom; background-size: 480px auto; }
.content-holder.doodles .content p b { font-size: 16px; line-height:130%; }

.map-holder div { padding: 15px; top:15px; left:15px;}
.map-holder div img { width: 110px; }
.map-holder div p { font-size: 15px; }

.content-holder.social-accounts .content h1 { font-size:20px; margin:30px 0; }
.social-accounts-cloud { padding: 60px 0; }

a.sa-button { font-size: 12px; letter-spacing: -0.5px; }


	}
  
@media only screen and (max-width: 480px) {
   
  .cbp-af-header { height:140px; }
  
  .logo-cloud { height: 140px; padding: 10px 0 0 0; }

  a.logo { width:109px; height:40px; }

  ul.icons-menu { width: 130px; height: 24px;}
      ul.icons-menu li a { width:24px; height:24px; margin: 0 1px; }
    
      
/* transitions and class for reduced height */
.cbp-af-header.cbp-af-header-shrink { top:-90px; }    

/* spot style */

.spot { height:400px; }  
    .spot-overlay-color { height:120px; }
      .spot-overlay-color .content { height:80px; padding: 30px 0 0 0; font-size:18px;  }
      .spot-overlay-color .content i { font-size: 15px; }

/* spot style */
  .our-services a { width: 48%; }

  .cards a { width:100%; margin:0 0 30px 0; }
    .cards a:nth-child(4) {margin:0 0 30px 0; }    
   
    .content.long-train { background-size: 80% auto ; background-position: center bottom; padding: 0 30px 60px 30px; }

    .content-holder.mobile-app { min-height: 500px; padding:60px 0 200px 0; background: url(img/hp-bg-app-mobile.webp) no-repeat center bottom; background-size:cover; }
    .content-holder.mobile-app .content { text-align: center; }
   
    .thumbnails a { width:100%; margin:0 0 30px 0; }

}