/*   
Theme Name: 0-60call
*/

*{
margin: 0;
padding: 0;
border: 0;
}
  
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}
  
@font-face {
font-family: avenir;
src: url(https://call911.kz/wp-content/themes/0-60call/font/avenir.ttf);
}
  
body {
font: 20px/25px avenir;
}
  
#wrap {
margin: 0 auto;
width: 100%;
min-width: 300px;
padding: 155px 0 0 0;
overflow-x: hidden;
background: #fff;
line-height: 1.4;
color: #333;
}
  
img {
padding: 0;
margin: 0;
border: 0;
max-width: 100%;
height: auto;
}
  
p {
margin: 0 0 1em 0;
}
  
a {
text-decoration: none;
color: #162b6a;
}
  
#header {
width: 100%;
background: #434152;
position: fixed;
top: 0;
z-index: 9;
}
  
header {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 1200px;
padding: 50px 0 50px 0;
}

#logo {
position: absolute;
top: 10px;
left: 1px;
}

#logo img {
width: 240px;
display: block;
}

#callme {
position: absolute;
top: 29px;
left: 520px;
}

#callme a {
background: #fc146c;
color: #fff;
font: bold 18px avenir;
display: inline-block;
padding: 12px 25px;
border-radius: 25px;
}

#phone {
position: absolute;
top: 30px;
right: 1px;
width: 240px;
display: grid;
grid-gap: 0 2%;
grid-template-columns: 40px 1fr;
}

#phone a {
font: bold 20px avenir;
color: #fff;
display: flex;
align-items: center;
}

#menu {
height: 54px;
background: #434152;
border-top: 1px solid #f5f5f5;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

#breadcrumb {
margin: 15px 0 15px 0;
}
  
.center {
margin: 0 auto;
width: 100%;
max-width: 1200px;
}
  
#slider {
margin: 0 0 0 0;
}
  
#slider img {
display: block;
}

#hometext {
padding: 100px 0 100px 0;
}

#hometext .center {
max-width: 1000px;
}
        
#hometext h2 {
margin: 0 0 30px 0;
}          

#hometext p {
font: 20px avenir;
display: flex;
align-items: center;
}

#hometext p img {
margin: 0 10px 0 0;
}

#hometext h3 {
font: 30px avenir;
padding: 20px 40px;
border: 2px dotted #333;
margin: 70px 0 50px 0;
}
        
#hometext a {
background: #fc146c;
color: #fff;
font: bold 18px avenir;
display: inline-block;
margin: 0 auto;
padding: 20px 45px;
border-radius: 35px;
}

#reviews {
padding: 0 0 100px 0;
}

#service {
padding: 0 0 100px 0;
text-align: center;
}

#service .center {
max-width: 1000px;
}

#service h2 {
margin: 0 0 30px 0;
} 

#service .center p {
background-color: #fff;
color: #333;   
font: 25px avenir;
display: block;
margin: 0 0 50px 0;
padding: 30px 45px;
border-radius: 45px;
}

#service p:nth-child(even) {
background: #fc146c;
color: #fff;
}

#service a {
background: #fc146c;
color: #fff;
font: bold 18px avenir;
display: inline-block;
margin: 0 auto;
padding: 20px 45px;
border-radius: 35px;
}

#people {
padding: 0 0 100px 0;
}

#people .center > div {
margin: 0 0 50px 0;
}

.about {
display: grid;
grid-gap: 20px 2%;
grid-template-columns: 39% 59%;
margin: 0 0 20px 0;
}
  
.text {
display: flex;
align-items: center;
}

#mymail {
padding: 50px 0 50px 0;
background: #434152;
}

#mymail .center {
max-width: 1000px;
}

#mymail h2 {
margin: 0 0 30px 0;
color: #fff;
} 

#mymail form {
display: grid;
grid-gap: 20px 2%;
grid-template-columns: 1fr 1fr 1fr;
}    
        
#mymail input {
padding: 20px 30px;
border-radius: 35px;
background: #fff;
font: 20px avenir;
display: block;
width: 100%;
text-align: center;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
        
#mymail button {
background: #fc146c;
color: #fff;
display: block;
cursor: pointer;
text-align: center;
width: 100%;
height: auto;
font: 20px avenir;
padding: 20px 30px;
border-radius: 35px;
}

#result {
text-align: center;
color: #fff;
margin: 20px 0 0 0;
}

#map {
padding: 50px 0 50px 0;
}

#mymail2 input {
padding: 10px 30px;
margin: 0 0 20px 0;
border-radius: 35px;
background: #fff;
border: 1px solid #ccc;
font: 20px avenir;
display: block;
width: 100%;
text-align: center;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
            
#mymail2 button {
background: #fc146c;
color: #fff;
display: block;
cursor: pointer;
text-align: center;
width: 100%;
height: auto;
font: 20px avenir;
padding: 10px 30px;
border-radius: 35px;
}
    
#result2 {
text-align: center;
color: #333;
margin: 20px 0 0 0;
}

#section {
margin: 0 auto;
width: 94%;
max-width: 1200px;
padding: 0 0 50px 0;
}
  
h1 {
font: bold 55px/55px avenir;
margin: 40px 0 20px 0;
text-align: center;
}
  
h2 {
font: bold 50px/50px avenir;
margin: 40px 0 20px 0;
text-align: center;
}
  
h3 {
font: bold 35px/35px avenir;
margin: 40px 0 20px 0;
text-align: center;
}

#whatsapp {
position: fixed;
right: 10px;
bottom: 10px;
z-index: 9;
width: 50px;	
}
          
#whatsapp img {
display: block;
}
  
#myfooter {
width: 100%;
background: #434152;
}
     
footer {
position: relative;
width: 94%;
max-width: 1200px;
margin: 0 auto;
height: 150px;
}
        
#copy {
padding: 5px 0 25px 0;
background: #434152;
}
        
#copy p {
font: 16px avenir;
margin: 0 0 0 0;
padding: 20px 0 0 0;
color: #fff;
text-align: center;
}
        
#copy a {
font: 16px avenir;
text-decoration: none;
color: #f5f5f5;
}
  
#gallery {
display: grid;
grid-gap: 20px 2%;
grid-template-columns: 32% 32% 32%;
text-align: center;
}
  
#catalog {
display: grid;
grid-gap: 30px 2%;
grid-template-columns: 32% 32% 32%;
margin: 0 0 30px 0;
}
  
#mylinks {
text-align: center;
margin: 0 0 40px 0;
}
  
table {
border-collapse: collapse;
width: 100%;
}
  
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
  
tr:nth-child(even) {
background-color: #dddddd;
}
  
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, #language2 {
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: bold 23px/23px avenir;
padding: 15px 20px;
color: #fff;
text-decoration: none;
display: block;
}
  
#mymenu ul li ul {
display: none;	
}
  
#mymenu ul li:hover ul {
position: absolute;
top: 54px;
display: block;
z-index: 9;
}
  
.myspan {
position: relative;
 }
  
.myspan span {
cursor: poavenir;
color: red;
}
  
#mymenu ul li span {
position: absolute;
top: 21px;
right: 0;
display: block;
border: solid #fff;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
  
#mymenu ul li ul li a {
font: 14px arial;
padding: 15px 20px;
color: #fff;
background: #fc146c;
text-decoration: none;
display: block;
width: 200px;
}
  
button {
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: poavenir;
}
  
.slide-arrow {
position: absolute;
top: 50%;
margin-top: -15px;
z-index: 1;  
}
  
#reviews .prev-arrow {
left: -20px;
width: 0;
height: 0;
border: solid #fc146c;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 8px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
  
#reviews .next-arrow {
right: -20px;
width: 0;
height: 0;
border: solid #fc146c;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 8px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}

.prev-arrow {
left: 20px;
width: 0;
height: 0;
border: solid #fff;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 8px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
  
.next-arrow {
right: 20px;
width: 0;
height: 0;
border: solid #fff;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 8px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
  
#reviews .slick-slide {
margin: 0 15px;
}
 
@media only screen and (max-width:1200px){
.center {
width: 96%;
padding: 0 2% 0 2%;	
}
}
  
@media only screen and (max-width:1100px){
body {
font: 14px/20px avenir;
}
#wrap {
margin: 0 auto;
width: 100%;
min-width: 300px;
padding: 60px 0 0 0;
overflow-x: hidden;
background: #fff;
line-height: 1.4;
color: #333;
}
header {
padding: 30px 0 30px 0;
}  
#logo {
position: absolute;
top: 10px;
left: 1px;
} 
#logo img {
width: 120px;
}  
#callme {
position: absolute;
top: 15px;
left: 130px;
} 
#callme a {
font: bold 12px avenir;
padding: 7px 7px;
border-radius: 25px;
}
#phone {
position: absolute;
top: 10px;
right: 45px;
padding: 0 0 0 0;
background: transparent;
width: 100px;
}
#phone a {
font: bold 12px avenir;
}
#hamburger {
position: absolute;
right: 1px;
top: 13px;
cursor: pointer;
display: inline-block;
}
#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: #fc146c;
color: #fff;
text-decoration: none;
display: block;
}
#menucontact {
display: block;
margin: 30px 0 0 20px;
}
#mymenu ul li {
float: none;
display: block;
list-style: none;
position: relative;	
}
#mymenu ul li a {
font: bold 18px avenir;
padding: 15px 20px;
color: #333;
text-decoration: none;
display: block;
width: 70%;
}
#mymenu ul li span {
position: absolute;
top: 15px;
right: 20px;
border: none;
display: block;
border: solid #333;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 5px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
#mymenu ul li:hover ul {
position: relative;
top: 0;
display: none;
}
#mymenu ul li ul {
display: none;	
}
#mymenu ul li ul li a {
font: 16px avenir;
padding: 15px 30px;
color: #333;
background: transparent;
text-decoration: none;
display: block;
width: 100%;
}
}
  
@media only screen and (max-width:950px){
#hometext {
       padding: 50px 0 50px 0;
      }   
        #hometext h2 {
        margin: 0 0 10px 0;
        }          
        
        #hometext p {
        font: 16px avenir;
        display: flex;
        align-items: center;
        }
        
        
        #hometext h3 {
        font: 20px avenir;
        padding: 20px 40px;
        border: 2px dotted #333;
        margin: 30px 0 50px 0;
        }
                
        #hometext a {
        background: #fc146c;
        color: #fff;
        font: bold 16px avenir;
        display: inline-block;
        margin: 0 auto;
        padding: 10px 25px;
        border-radius: 35px;
        }
        #reviews {
            padding: 0 0 50px 0;
            }
            
            #service {
            padding: 0 0 50px 0;
    
            }
            
  
            
            #service h2 {
            margin: 0 0 30px 0;
            } 
            
            #service .center p {
            background-color: #fff;
            color: #333;   
            font: 16px avenir;
            display: block;
            margin: 0 0 30px 0;
            padding: 15px 25px;
            border-radius: 45px;
            }
            
            #service p:nth-child(even) {
            background: #fc146c;
            color: #fff;
            }
            
            #service a {
                background: #fc146c;
                color: #fff;
                font: bold 16px avenir;
                display: inline-block;
                margin: 0 auto;
                padding: 10px 25px;
                border-radius: 35px;
            }
            
            #people {
            padding: 0 0 50px 0;
            }
            
            #people .center > div {
            margin: 0 0 30px 0;
            }
            
            .about {
            display: grid;
            grid-gap: 20px 2%;
            grid-template-columns: 100%;
            margin: 0 0 20px 0;
            }
              
            .text {
            display: flex;
            align-items: center;
            }
            
            #mymail {
            padding: 50px 0 50px 0;
            background: #434152;
            }
            
            #mymail .center {
            max-width: 1000px;
            }
            
            #mymail h2 {
            margin: 0 0 30px 0;
            color: #fff;
            } 
            
            #mymail form {
            display: grid;
            grid-gap: 20px 0;
            grid-template-columns: 100%;
            }    
                    
            #mymail input {
            padding: 15px 30px;
            border-radius: 35px;
            background: #fff;
            font: 16px avenir;
            display: block;
            width: 100%;
            text-align: center;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            }
                    
            #mymail button {
            background: #fc146c;
            color: #fff;
            display: block;
            cursor: pointer;
            text-align: center;
            width: 100%;
            height: auto;
            font: 16px avenir;
            padding: 15px 30px;
            border-radius: 35px;
            }
            
            #map {
            padding: 20px 0 0 0;
            }
            
            #mymail2 input {
                padding: 15px 30px;
                border-radius: 35px;
                background: #fff;
                font: 16px avenir;
                display: block;
                width: 100%;
                text-align: center;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }
                        
            #mymail2 button {
                background: #fc146c;
                color: #fff;
                display: block;
                cursor: pointer;
                text-align: center;
                width: 100%;
                height: auto;
                font: 16px avenir;
                padding: 15px 30px;
                border-radius: 35px;
            }


h1 {
font: bold 30px/30px avenir;
margin: 20px 0 10px 0;
}
h2 {
margin: 40px 0 10px 0;
font: bold 20px/20px avenir;
}
h3 {
margin: 40px 0 20px 0;
font: bold 20px/20px avenir;
}
#gallery {
display: grid;
grid-gap: 10px 4%;
grid-template-columns: 48% 48%;
text-align: center;
}
#catalog {
display: grid;
grid-gap: 30px 0;
grid-template-columns: 100%;
}
}