*{
margin: 0;
padding: 0;
border: 0;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}
@font-face {
font-family: roboto;
src: url(//almatysite.kz/wp-content/themes/0-48almaty/font/robotoregular.ttf);
}
@font-face {
font-family: robotobold;
src: url(//almatysite.kz/wp-content/themes/0-48almaty/font/robotobold.ttf);
}    
body {
font: 16px/26px roboto;
color: #0a1c33;
}
#wrap {
margin: 0 auto;
width: 100%;
min-width: 300px;
overflow-x: hidden;
line-height: 1.4;
}
img {
padding: 0;
margin: 0;
border: 0;
max-width: 100%;
height: auto;
}
p {
margin: 0 0 30px 0;
}
a {
text-decoration: none;
color: dodgerblue;
}
#header {
width: 100%;
background: #fff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
header {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 1200px;
height: 60px;
}
#logo {
position: absolute;
top: 20px;
left: 1px;
}
#logo a {
font: 22px/22px robotobold;
color: dodgerblue;
display: block;
transition: 0.5s;
}
#logo span {
color: #333;
transition: 0.5s;
}
#phone {
position: absolute;
top: 11px;
right: 1px;
}
#phone a {
font: 15px/16px robotobold;
border: 1px solid dodgerblue;
padding: 10px 18px;
border-radius: 10px;
display: inline-block;
transition: 0.5s;
}
#phone a:hover {
background: dodgerblue;
color: #fff;
}
#menu {
position: absolute;
top: 3px;
left: 180px;
width: 65%;
height: 54px;
}
#breadcrumb {
margin: 15px 0 0 0;
}
#slider {
padding: 110px 0 110px 0;
background: url(//almatysite.kz/wp-content/themes/0-48almaty/img/wave.webp);
animation: slider 50s ease-out infinite;
}
@keyframes slider {
0% {
background-position: 0 0;
}  
50% {
background-position: 100% 0;
}
100% {
background-position: 0 0;
}
}
#slider .center {
display: grid;
gap: 40px 3%;
grid-template-columns: 1fr 1fr;
}
#slogan {
display: flex;
align-items: center;
}
#slider h1 {
font: 70px/70px robotobold;
margin: 0 0 20px 0;
text-align: left;
color: #333;
}
#slider p {
color: #333;
font: 16px/25px roboto;
margin: 0 0 25px 0;
}
#slider a {
font: 16px/16px robotobold;
border: 2px solid dodgerblue;
padding: 15px 35px;
border-radius: 10px;
display: inline-block;
transition: 0.5s;
color: #fff;
background: dodgerblue;
}
#slider a:hover {
background: transparent;
color: #333;
}
#slider img {
display: inline-block;
}
#like {
margin: 100px 0 100px 0;
background: #fff;
}
#like h2 {
margin: 0 0 40px 0;
}
#like .center {
display: grid;
gap: 20px 20px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
#like .center div {
background: #ceeaff;
color: #333;
padding: 30px 30px;
border-radius: 15px;
-moz-box-sizing: border-box;
box-sizing: border-box;
transition: 0.5s;
}
#like .center div:hover {
background: dodgerblue;
color: #fff;
}
#like h3 {
font: 40px/40px robotobold;
margin: 0 0 20px 0;
text-align: left;
}
#like p {
margin: 0 0 0 0;
font-size: 15px;
}
#step {
padding: 100px 0 100px 0;
margin: 0 0 100px 0;
background-image: url(//almatysite.kz/wp-content/themes/0-48almaty/img/cup_of_coffee1.webp), url(//almatysite.kz/wp-content/themes/0-48almaty/img/brush.webp), url(//almatysite.kz/wp-content/themes/0-48almaty/img/fon1.png);
background-position: left top, right bottom, left top;
background-repeat: no-repeat, no-repeat, repeat;
background-size: auto auto, auto auto, auto auto;
}
#step .center {
display: grid;
gap: 40px 3%;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
#step .center div {
padding: 30px 20px 50px 20px;
background: #fff;
border-radius: 15px;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 2px solid dodgerblue;
opacity: 1;
transition: my 0.3s ease-in-out;
}
#step .center div:hover {
opacity: 0.8;
border: 2px solid #fff;
}
#step h2 {
margin: 0 0 30px 0;
}
#step h3 {
font: 45px robotobold;
color: dodgerblue;
margin: 0 0 10px 0;
text-align: center;
}
#step h3 span {
font: 20px robotobold;
color: #333;
margin: 0 0 0 5px;
}
#step p {
font: 14px/20px roboto;
color: #333;
margin: 0 0 0 0;
text-align: center;
}
.slide a {
position: relative;
display: block;
border-radius: 10px;
overflow: hidden;
color: #fff;
text-decoration: none;
}
.slide img {
display: block;
}
.slide p {
position: relative;
bottom: 0;
left: 0;
width: 100%;
background: dodgerblue;
margin: 0 0 0 0;
padding: 10px 7px;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
.center {
margin: 0 auto;
width: 100%;
max-width: 1200px;
}
#faq {
background: #fff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
padding: 0 0 100px 0;
}
#faq .center {
max-width: 1000px;
}
.accordion {
background: #fff;
color: #212529;
cursor: pointer;
padding: 18px;
margin: 0 0 20px 0;
width: 100%;
border: none;
border-radius: 5px;
text-align: left;
outline: none;
font: 18px/20px robotobold;
transition: 0.4s;
display: grid;
gap: 0 20px;
grid-template-columns: 1fr 30px;
align-items: center;
border: 1px solid rgba(0, 0, 0, 0.125);
}
.accordion span:before {
content: '\002B';
color: dodgerblue;
float: right;
font: 25px/25px roboto;
}
.active span:before {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
#type {
padding: 100px 0 100px 0;
}
#type h2 {
margin: 0 0 30px 0;
}
#type .center {
overflow-x: auto;
}
#type .center > div {
min-width: 700px;
display: grid;
gap: 0 40px;
grid-template-columns: 1fr 1fr 1fr;
}
#type .center > div > div {
padding: 50px 50px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 15px;
min-width: 300px;
}
#type h3 {
font: 25px robotobold;
margin: 0 0 20px 0;
}
#type h4 {
font: 20px robotobold;
text-align: center;
}
#type ul {
list-style: none;
}
#type ul li {
padding: 0 0 20px 30px;
background: url(//almatysite.kz/wp-content/themes/0-48almaty/img/star.svg) no-repeat;
background-position: 0 0;
background-size: 20px auto;
}
#seo {
padding: 100px 0 100px 0;
margin: 0 0 100px 0;
background-image: url(//almatysite.kz/wp-content/themes/0-48almaty/img/fon1.png);
background-position: left top;
background-repeat: repeat;
background-size: auto auto;
}
#seo .center {
max-width: 1000px;
text-align: center;
}
#seo h2 {
margin: 0 0 20px 0;
}
#work {
margin: 0 0 100px 0;
}
#work .center {
display: grid;
gap: 60px 40px;
grid-template-columns: 1fr 1fr;
}
#work .center > div {
position: relative;
}
#work h3 {
font: 21px/25px robotobold;
text-align: center;
color: #333;
margin: 35px 0 10px 0;
}
#work img {
display: block;
border-radius: 15px;
}
#work p {
margin: 0 0 0 0;
color: #333;
font: 16px/25px roboto;
}
#landingslogan {
padding: 200px 0 200px 0;
text-align: center;
}
#landing h1 {
font: 70px/70px robotobold;
margin: 0 0 15px 0;
text-align: center;
color: #fff;
}
#landing p {
color: #fff;
font: 18px/25px roboto;
margin: 0 0 25px 0;
text-align: center;
}
#landing a {
font: 16px/16px robotobold;
padding: 15px 35px;
border-radius: 10px;
display: inline-block;
transition: 0.5s;
color: #fff;
background: #f00027;
border: 2px solid #f00027;
}
#landing a:hover {
background: transparent;
color: #fff;
}
#what {
margin: 100px 0 100px 0;
}
#what h2 {
margin: 0 0 50px 0;
}
.about {
display: grid;
gap: 40px 3%;
grid-template-columns: 1fr 1fr;
}
.text {
display: flex;
align-items: center;
}
.text h3 {
font: 25px robotobold;
text-align: left;
margin: 0 0 15px 0;
}
.text p {
margin: 0 0 20px 0;
}
.about img {
display: block;
border-radius: 15px;
-webkit-box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.2);
-moz-box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.2);
box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.2);
}
#section {
margin: 0 auto;
width: 94%;
max-width: 1200px;
padding: 0 0 50px 0;
}
article a {
color: dodgerblue;
text-decoration: underline;
}
article a:hover {
text-decoration: none;
}
article ul {
list-style-type: none;
}
article ul li:before {
content: "\2022";
color: dodgerblue;
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
}
h1 {
font: 50px/60px robotobold;
margin: 40px 0 20px 0;
text-align: center;
}
h2 {
font: 45px/45px robotobold;
margin: 40px 0 20px 0;
text-align: center;
}
h3 {
font: 40px/40px robotobold;
margin: 40px 0 20px 0;
text-align: center;
}
h1 span, h2 span, h3 span {
color: dodgerblue;
}
#whatsapp {
position: fixed;
right: 10px;
bottom: 10px;
z-index: 9;
width: 50px;	
}
#whatsapp img {
display: block;
margin: 0 0 10px 0;
}
#myfooter {
width: 100%;
background: rgb(248, 249, 250);
}
footer {
position: relative;
width: 94%;
max-width: 1200px;
margin: 0 auto;
padding: 100px 0 70px 0;
display: grid;
gap: 10px 10%;
grid-template-columns: 20% 1fr 1fr 20%;
}
footer ul li {
list-style: none;
}
#footerlogo a {
font: bold 22px/22px roboto;
color: dodgerblue;
display: block;
}
#footerlogo span {
color: #333;
}
footer h4 {
color: #000;
font: 20px/20px robotobold;
margin: 0 0 20px 0;
}
footer p {
font: 14px/25px roboto;
display: block;
color: rgb(95, 99, 104);
margin: 0 0 10px 0;
}
footer a {
font: 14px roboto;
display: block;
color: rgb(95, 99, 104);
margin: 0 0 10px 0;
transition: 0.7s;
}
footer a:hover {
color: dodgerblue;
}
#gallery {
display: grid;
gap: 20px 2%;
grid-template-columns: 1fr 1fr 1fr;
text-align: center;
}
#catalog {
display: grid;
gap: 30px 2%;
grid-template-columns: 1fr 1fr 1fr;
margin: 0 0 30px 0;
}
#mylinks {
text-align: center;
margin: 0 0 40px 0;
}
#see a {
font: 16px/16px robotobold;
padding: 15px 35px;
border-radius: 25px;
display: inline-block;
color: #fff;
background: dodgerblue;  
text-decoration: none;  
}
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
img.alignright {
float: right;
margin: 0 10px 3px 5px;
}
img.alignleft {
float: left;
margin: 0 10px 3px 0;
}
img.aligncenter {
display: block;
margin: 0 auto;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
.aligncenter {
display: block;
margin: 0 auto;
}
.error {
color: red;
}
.clear {
width: 100%;
height: 1px;
clear: both;
}
.myvideo {
position: relative;
padding: 30px 0 56.25% 0;
height: 0;
overflow: hidden;
border: 1px solid #ccc;
}
.myvideo iframe,.myvideo object,.myvideo embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
article ul, article ol {
margin: 0 0 0 20px;
}
article ul li, article ol li {
margin: 0 0 10px 0;
}
.closebtn, #hamburger, #menucontact {
display: none;
}
#mymenu {
width: 100%;
max-width: 1230px;
margin: 0 auto;
}
#mymenu ul li {
float: left;
list-style: none;
position: relative;	
}
#mymenu ul li a {
font: 17px/17px roboto;
padding: 18px 15px 12px;
color: #333;
text-decoration: none;
display: block;
}   
#mymenu ul li ul {
display: none;	
position: absolute;
top: 0;
left: 100%;
}
#mymenu > ul > li:hover > ul {
position: absolute;
top: 45px;
left: 0;
display: block;
z-index: 9000;
}
#mymenu ul li:hover > ul {
display: block;
}
.myspan {
position: relative;
}
#mymenu ul li span {
position: absolute;
top: 21px;
right: 0;
display: block;
border: solid #333;
border-width: 0 1px 1px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
#mymenu ul li ul li a {
font: 14px roboto;
padding: 15px 20px;
color: #333;
background: #fff;
text-decoration: none;
display: block;
width: 200px;
}
@media only screen and (max-width:1200px){
.center {
width: 96%;
padding: 0 2% 0 2%;	
}
}
@media only screen and (max-width:1100px){
body {
font: 15px/22px roboto;
}
header {
height: 50px;
}
#logo {
top: 15px;
left: 3px;
} 
#logo a {
font: 20px/20px robotobold;
}  
#phone {
position: absolute;
top: 9px;
right: 50px;
}      
#phone a {
font: 14px/16px robotobold;
padding: 7px 12px;
border-radius: 10px;
}
#hamburger {
position: absolute;
right: 1px;
top: 9px;
cursor: pointer;
display: inline-block;
}
#menucontact {
display: block;
margin: 50px 0 50px 0;
}
#menu {
background: rgba(255, 255, 255, 1);
margin: 0 0 0 0;
min-height: 100vh;
width: 0;
max-width: 800px;
position: fixed;
z-index: 9999999;
top: 0;
left: 0;
overflow-x: hidden;
transition: 0.2s;
}
#menu .closebtn {
position: absolute;
top: 0;
right: 0;
font-size: 36px;
padding: 0 10px 0 10px;
line-height: 1;
background: dodgerblue;
color: #fff;
text-decoration: none;
display: block;
}
#mymenu ul li {
float: none;
display: block;
list-style: none;
position: relative;	
}
#mymenu ul li a {
font: 20px robotobold;
padding: 15px 20px;
color: #333;
text-decoration: none;
display: block;
width: 70%;
}
#mymenu ul li span {
border-width: 0 2px 2px 0;
right: 15px;
}
.bottom {
top: 22px !important;
transform: rotate(225deg) !important;
}  
#mymenu > ul > li:hover > ul, #mymenu ul li:hover > ul {
position: relative;
top: 0;
display: none;
}
#mymenu ul li ul, #mymenu ul li:hover > ul {
display: none;	
}
#mymenu ul li ul li a {
font: 16px roboto;
padding: 15px 30px;
color: #333;
background: transparent;
text-decoration: none;
display: block;
width: 100%;
}
}
@media only screen and (max-width:950px){ 
#slider {
padding: 70px 0 20px 0;
}  
#slider .center {
gap: 30px 0;
grid-template-columns: 100%;
text-align: center;
}
#slogan {
display: block;
}
#slider h1 {
font: 40px/50px robotobold;
margin: 0 0 10px 0;
text-align: center;
}
#slider p {
font: 15px/25px roboto;
margin: 0 0 20px 0;
text-align: center;
}
#slider a {
font: 15px/16px robotobold;
padding: 12px 25px;
border-radius: 10px;
margin: 0 auto;
}    
#like {
margin: 50px 0 50px 0;
}  
#like h2 {
font: 30px robotobold;
margin: 0 0 20px 0;
}
#like .center {
gap: 10px 10px;
grid-template-columns: 1fr 1fr;
}
#like .center div {
padding: 30px 15px;
border-radius: 15px;
}
#like h3 {
font: 30px/30px robotobold;
margin: 0 0 10px 0;
} 
#like p {
font: 14px roboto;
}
#step {
padding: 50px 0 60px 0;
margin: 0 0 50px 0;
background-size: 30% auto, 40% auto, auto auto;
}
#step .center {
display: grid;
gap: 10px 10px;
grid-template-columns: 1fr 1fr;
}
#step .center div {
padding: 20px 20px 40px 20px;
border-radius: 15px;
}
#step h2 {
font: 30px robotobold;
margin: 0 0 20px 0;
}
#step h3 {
font: 35px robotobold;
margin: 0 0 10px 0;
} 
#step h3 span {
font: 16px robotobold;
margin: 0 0 0 5px;
}  
#step p {
font: 14px/20px roboto;
margin: 0 0 0 0;
}
#type {
padding: 50px 0 50px 0;
margin: 0 0 50px 0;
}
#faq {
padding: 0 0 50px 0;
}
#faq h2 {
font: 30px robotobold;
}
.panel p {
font: 15px/22px roboto;
}
#type {
padding: 50px 0 50px 0;
}
#type h2 {
font: 30px robotobold;
margin: 0 0 20px 0;
}
#type h3 {
font: 25px robotobold;
}
#type .center > div > div {
padding: 50px 20px;
border-radius: 15px;
}
.accordion {
font: 18px robotobold;
}
#type ul li {
padding: 0 0 20px 30px;
background: url(//almatysite.kz/wp-content/themes/0-48almaty/img/star.svg) no-repeat;
background-position: 0 2px;
background-size: 20px auto;
}
#what {
margin: 50px 0 50px 0;
}
#what h2 {
font: 30px robotobold;
margin: 0 0 20px 0;
}
.about {
gap: 20px 0;
grid-template-columns: 100%;
}
.text h3 {
font: 20px robotobold;
}
#seo {
padding: 50px 0 50px 0;
margin: 0 0 50px 0;
}
#seo h2 {
font: 30px robotobold;
margin: 0 0 20px 0;
}
#work {
margin: 0 0 50px 0;
}
#work h2 {
font: 30px robotobold;
margin: 0 0 20px 0;
}
#work .center {
display: grid;
gap: 40px 0;
grid-template-columns: 100%;
}
#work h3 {
font: 23px/23px robotobold;
margin: 30px 0 10px 0;
}
#work p {
font: 15px/25px roboto;	
}
.reverse {
display: flex;
flex-direction: column-reverse;
}
#landingslogan {
padding: 100px 0 100px 0;
}
#landing h1 {
font: 40px/40px robotobold;
margin: 0 0 15px 0;
}
#landing p {
font: 15px/25px roboto;
margin: 0 0 20px 0;
}
#landing a {
font: 15px/16px robotobold;
padding: 12px 25px;
border-radius: 10px;
margin: 0 auto;
} 
h1 {
font: 30px/30px robotobold;
margin: 20px 0 10px 0;
}
h2 {
margin: 40px 0 10px 0;
font: 25px/25px robotobold;
}
h3 {
margin: 40px 0 10px 0;
font: 20px/20px robotobold;
}
p {
margin: 0 0 2em 0;
}
footer {
gap: 20px 0;
grid-template-columns: 100%;
}  
footer a {
font: 15px roboto;
}
#copy p {
font: 15px roboto;
}
#gallery {
display: grid;
gap: 10px 4%;
grid-template-columns: 48% 48%;
text-align: center;
}
#catalog {
display: grid;
gap: 30px 0;
grid-template-columns: 100%;
}
#see a {
font: 15px/16px robotobold;
padding: 12px 30px;
border-radius: 20px; 
}
}