@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Amatic+SC|Red+Hat+Display&display=swap&subset=latin-ext');
html,body {margin:0; padding:0; overflow-x: hidden;}
body {
	background: rgb(231,245,251);
background: -moz-linear-gradient(top,  rgba(231,245,251,1) 0%, rgba(42,169,219,1) 100%);
background: -webkit-linear-gradient(top,  rgba(231,245,251,1) 0%,rgba(42,169,219,1) 100%);
background: linear-gradient(to bottom,  rgba(231,245,251,1) 0%,rgba(42,169,219,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7f5fb', endColorstr='#2aa9db',GradientType=0 );
 background-attachment:fixed;
	max-width: 100%; overflow-x: hidden;
	color: #000;
	font-weight: 400; font-size: 14px;
	font-family: 'Red Hat Display', sans-serif;
	text-align:center
}
div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
span.no-wrap{white-space:nowrap;}
h1, h2, h3, h4, h5, h6 {margin:1em auto; font-family: 'Amatic SC', cursive;}
a {color: inherit; text-decoration:none; cursor:pointer; border:none; position:relative; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease;}
	a:hover {color:#2aa9db;}
.clouds {width:100%; height:100%; top:0; left:0; position:absolute; min-height:100vh; display:block; z-index:-2;background: url(img/4088a.png) repeat 0 0; -webkit-animation: cloudsMove 120s linear infinite;}
@-webkit-keyframes cloudsMove {
    from { background-position: 0 0; }
    to { background-position: 1000px 0; }
}
.wraper {display:block;display:inline-block;position:relative;width:100%;max-width:1200px;padding:0 10px;box-sizing:border-box;}
header {width:100%;display:block;position:relative;  background:#2aa9db;background:#fcfeff; height:120px; float:left;} 
header #logo {width:300px; height:120px; float:left; text-align:left;}
header #logo img {height:90px; width:auto; padding-top:10px;margin-right:10px;display:block; float:left;}
header #logo h3 {width:200px; display:block; font-size:2.2em;float:left; margin-top:24px}
header nav {width:calc(100% - 300px); display:block; right:0; bottom:20px; position:absolute;text-align:right}
header nav a:not(.social) {margin:0 5px; padding:0 5px; font-size:1.4em; letter-spacing:1px;color:#4ab6e0;display:inline-block; position:relative}
header nav a:hover, header nav a.active {color:#0fa3de}
header nav a:not(.social):before,header nav a:not(.social):after  {content:''; display:block; bottom:0; position:absolute; height:1px; width:0; background:#0fa3de; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease}
header nav a::before {right:50%}
header nav a::after {left:50%}
header nav a:hover:before, header nav a.active::before,header nav a:hover:after, header nav a.active::after {width:50%}

header nav .social {width:26px; height:26px; display:block;display:inline-block;background:no-repeat center url(img/fb-blue.svg); background-size:22px; padding:0; margin:5px 3px 12px; position:relative; cursor:pointer}
header nav .social.share {background-image: url(img/share-blue.svg);}



main {display:block;display:inline-block;width:100%;position:relative;overflow:hidden;padding:0;}
section {display:block;display:inline-block;width:100%;position:relative;min-height:100vh}
section.home .tree {background: no-repeat right top url(img/tree2.png); background-size:contain; width:50%; left:50%; height:100vh; display:block; position:relative; z-index:1}
section.home .grass {background: repeat-x bottom url(img/grass.png); background-size:contain; width:100%; height:140px; display:block; position:absolute; z-index:2; bottom:0; left:0;}
section.home .house {background: no-repeat bottom url(img/home2.png); background-size:contain; width:50%; display:block; position:absolute; z-index:-1; bottom:1%; left:-3%; top:0;}
.home h1 {top:50%; left:50%; position:absolute; font-size:10vh; transform:translate(-50%,-50%); text-shadow:0 0 1px #fff; margin:1em 0 0;}


section.page {display:inline-block !important; min-height:50vh; background:#d0ecf7;}
section .content {width:100%; display:block; position:relative; min-height:100vh;margin:0; float:left}
section .content .cover {width:100%; display:block; background:no-repeat center; background-size:cover; height:30vh;position:relative; margin:10vh 0 5vh;}
section .content .title {left:0; bottom:0; position:absolute; background:#69c2e6; padding:10px; color:#fff}
section .content .title h2, section .content .title h3 {font-size: 2.6em; margin:0}


section .content .lead {width:55%; height:25vh;display:inline-block; background:#f8fcfe;float:left; text-align: left; padding:10px 10px; box-sizing:border-box}
section .content .body {width: 100%; display:inline-block; background:#f8fcfe; text-align: left; padding:20px; box-sizing:border-box; margin-bottom:5vh; position:relative;}
section.showcase {display:block; min-height:50vh}
section.showcase .title {background:#69c2e6; color:#fff; position:relative}
section.showcase .title strong {font-size:1.5em}
section.showcase .title p {margin:8px auto}
section.showcase .title h1, section.showcase .title h2, section.showcase .title h3 {left:20px; bottom:10px; position:absolute; font-size:2.6em; margin:0;}
section.showcase .title h1 i {font-style:normal; font-size:0.7em; display:block}
section.showcase .cover {background:#fff no-repeat center;background-size:cover;}
section.showcase .cover.teacher {background:#2aa9db no-repeat center url(img/kadra.png); background-color:#b8e2f3; background-size:contain}
section.showcase .cover.offer {background:#d0ecf7 no-repeat center url(img/offer.png); background-size:contain}
section.showcase .cover.contact {background:#d0ecf7 no-repeat center url(img/kontakt.png); background-size:contain}
section.showcase .cover.kids {background:#2aa9db no-repeat center url(img/kids.png); background-size:contain}
section.showcase .cover.rek {background-image:url(img/rek.jpg)}
section.showcase .title .text {bottom:10px; position:absolute;}
section.showcase .title.offer {background-color:#f8fcfe; color:#0fa3de}
section.showcase .title.f_left .text {left:15px; padding-right:10px; text-align:left}
section.showcase .title.f_right .text {right:15px; padding-left:10px;text-align:right}
section.showcase .mini-section {float:left}
section.showcase a:hover {color:inherit; text-decoration:underline}

section.home-content {width:calc(100% - 400px); float:left}
section.home-aside {width:400px; float:left}

section.page {display:inline-block !important; min-height:50vh; background:#d0ecf7;}
section.page h1 {text-align:left}
#galeria {display:block; width:100%; position:relative; text-align:center;background: #69c2e6;; float:left}
.img-box {width:20%; float:left;position:relative; background:#b8e2f3; }
.img-box.active, .img-box:hover {background:#2aa9db !important}
.img-box::before {content:''; padding-top:100%; display:block;}
.img-box:nth-of-type(2n) {background:#d0ecf7}
.img-box .clip {top:0; left:0; bottom:0; right:0; position:absolute; display:block; background:no-repeat center; background-size:cover; -webkit-clip-path: url(#heart);clip-path: url(#heart);}
.img-box:nth-of-type(2n) .clip {-webkit-clip-path: circle(37% at 50% 50%);clip-path: circle(37% at 50% 50%);}
.polygon-clip-kite {
		-webkit-clip-path: polygon(50% 0%, 100% 30%, 50% 100%, 0% 30%);clip-path: polygon(50% 0%, 100% 30%, 50% 100%, 0% 30%);
	}
.polygon-clip-star {
		-webkit-clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 37% 38%);
		clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 37% 38%);
	}
#galeria #big-photo {display:block;display:none;float:left; width:100%; position:relative; text-align: center;background:#fff; padding:20px;box-sizing:border-box}
#galeria #big-photo::after {content:attr(title); display:block; bottom:20px; left:0; width:100%; position:absolute; background:rgba(255,255,255,0.7); font-size:1.5em; color:#2aa9db; padding:5px 0}
#galeria #big-photo img {width:auto; height:auto; max-width:calc(100vw - 40px); max-height:calc(100vh - 80px); position:relative}

#gallery-title {text-align:center;background: #69c2e6; color:#fff}
#gallery-title img {width:50%; height:auto; margin-top:1em;}
#gallery-title h1 {text-align:center; font-size:5vh;}
#gallery-title h1 i {font-style:normal; width:100%; display:block; margin:10px 0 0;}
#gallery-title p {font-size:1.5em; margin:-1em 0 2em}

/* oferta */
.offer-text {display:inline-block; padding:5px 10px; width:48%; box-sizing:border-box; line-height:60px; vertical-align:middle}
.offer-text img {display:inline-block; height:60px; width:60px; vertical-align:middle}
.offer-text strong {display:inline-block; width: calc(100% - 80px); font-size:1.3em; letter-spacing:1px; margin-left:20px; line-height:1em; vertical-align:middle}

table {background:#69c2e6;color:#fff;margin-bottom:5vh}
table tr {background:rgba(21,132,176,0.1);}
table tr:nth-child(even) {background:rgba(21,132,176,0.5);}
table tr td {padding:5px; min-width:140px}
table tr td:first-child {background:#2aa9db;font-size:1.1em; padding-left:10px;font-weight:700}
table tr td h3 {font-family: 'Red Hat Display', sans-serif; font-size:1.3em; margin:5px 0}

/* kontakt */
.mapa {top:50%; left:0; width:50%; position:absolute; transform:translate(0,-50%);text-align:center}
.mapa inframe {display:inline-block; vertical-align:middle}
.home .contact {top:50%; left:50%; position:absolute; transform:translate(-50%,-50%); text-shadow:0 0 1px #fff; margin:1em 0 0; font-size:2em}
.home .contact h1 {position:static; transform:none;}

.f_left {float:left}
.f_right {float:right}
.w100 {width:100%}
.w50 {width:50%}
.w66 {width:67%}
.w33 {width:33%}
.w34 {width:34%}
.r1_1::before {content:''; display:block; padding-top:100%}
.r1_15::before {content:''; display:block; padding-top:150%}
.vh20 {height:20vh;min-height:180px}
.vh30 {height:30vh;min-height:220px}
.vh40 {height:40vh}
.vh50 {height:50vh}
.clear {clear:both}
footer {padding:10px; font-size:0.9em;background:#1584b0; color:#efefef}
footer a:hover {color:#fff}
svg {width:0; height:0;}
#blueimp-gallery h3.title {font-family: 'Red Hat Display', sans-serif;}