/*
Theme Name: KIEV
Theme URI: http://urakt.com
Author: Zatyliuk
Author URI: http://advokatura.org
Description: Шаблон адвоката Киева - Анатолия Затылюка
Version: 1.0.0
*/


html, body{
	margin: 0;
	padding: 0;
	border: 0;

}

body {
            line-height: 1;
background:#B4B4B4 url('image/fon.jpg') no-repeat center top; 
    	font: 14px Arial, sans-serif;
        color:#2f2f2f;
	width: 100%;
}


.wrapper {
    box-sizing: border-box;
    background-color: #fff;/*#fff #edecd5*/
	width: 900px;
	margin: 50px auto 50px;
    box-shadow: 0 0 32px 2px #5e5c5c;
}


@font-face{
font-family: Chibola1;
src: url('fonts/chibola.ttf'),
     url('fonts/chibola.woff');
                font-stretch:ultra-condensed;
}

@font-face{
font-family: Grad1;
src: url('fonts/grad.ttf'),
     url('fonts/grad.woff');
font-stretch:ultra-condensed;
}

/* Header
-----------------------------------------------------------------------------*/
.header {
    width:900px;
    height:450px;
    position:relative;

}
  .headtop {
    height: 30px;
      position: relative;
           background: linear-gradient(to bottom, #383838, #151515);
          box-sizing: content-box;
  }

.headbg{
            position:absolute;
    width:900px;
    height:450px;
    background-image:url(image/header.jpg);
    z-index:99; 
}

img {
    max-width: 100%;
    max-height: auto;
}

.logo{
        position:absolute;
top:50px;
left:614px;
  width:120px;
    height:120px;
        z-index:100; 
        text-align:center;
}

.adv{
        position:absolute;
top:280px;
left:450px;
  width:450px;
  text-align:center;
  font-family: Chibola1, serif;
  color:#fff;
        font-size:40px;
                    letter-spacing: 6px;
                        z-index:100; 
}

.advok{
        position:absolute;
top:0;
left:0;
  width:450px;
  text-align:center;
   z-index:100; 
                   font-stretch:ultra-condensed;

}

.zaa{
    top:180px;
        position:absolute;
left:450px;
  width:450px;
    text-align:center;
      color:#fff;
                  font: 36px Grad1, serif;
        line-height: 1.2;
            letter-spacing: 2px;
                z-index:100; 
 font-stretch:ultra-condensed;

}

.transition-opacity {
  background: #808991;
  color: #FFF;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  max-width: 500px;
  font-size: 20px;
  border: 4px ridge black;
  cursor: pointer;
  transition: 3s linear;
}
.transition-opacity:hover {
  opacity: .1;
}

a.vid, a.list{
        position:absolute;
  width:180px;
    height:65px;
    background-color: rgba(0, 0, 0, 0.8);
        border-radius:15px;
            box-shadow: 0 0 15px 0px #000;
            font: 24px Grad1, Arial;
            line-height: 1;
            opacity:4;
            color:#fff;
            text-decoration:none;
            box-sizing: border-box;
                font-stretch:ultra-condensed;
        transition: 0.1s linear;

}

a.vid:hover, a.list:hover{
    background-color: rgba(0, 0, 0, 0.6);
                box-shadow: 0 0 3px 0px #000;
                color:#fff;
            text-decoration:none;
                        opacity:0.8;
                                transition:0.1s linear;
}

a.vid{   
        background-image:url(image/video.png); 
        background-repeat: no-repeat;
        background-position: 15px 50%;
                background-size:contain;
            padding:9px 0 0 80px;
}

a.list {
        background-image:url(image/tel.png);
        background-size:contain;
                background-repeat: no-repeat;
                        background-position: 10px 50%;
            padding:9px 0 0 70px;
}


/* сетка */
.row {
    position:relative;
  margin: 0 0px;
  margin-bottom: 0px;
   z-index:100; 

}
.row:last-child {
  margin-bottom: 0;
}
[class*="col-"] {
  padding: 10px 10px;

}

   input, textarea, select {
 padding: 5px;
}

input:focus, textarea:focus, select:focus {
 outline-color:#8c2604;
}

input.wpcf7-submit:focus {
 outline-color:#a2491c;
}

.wpcf7-text
{
     width: 95%;
 }

.wpcf7-textarea
{
     width: 95%;
 }





.wpcf7-submit {text-decoration:none; text-align:center; 
 padding:11px 32px; 
 border:solid 1px #a2491c; 
 -webkit-border-radius:4px;
 -moz-border-radius:4px; 
 border-radius: 4px; 
 font:18px Arial, Helvetica, sans-serif; 
 font-weight:bold; 
 color:#ffffff; 
 background:#a2491c; 
 -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
 -moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;  
 box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
  cursor:pointer;
  
  
   -webkit-transition: all 0.3s ease;
 -moz-transition:  all 0.3s ease;
 -o-transition:  all 0.3s ease;
 transition:  all 0.3s ease;}

.wpcf7-submit:hover{
 padding:11px 32px; 
 border:solid 1px #8c2604; 
 -webkit-border-radius:4px;
 -moz-border-radius:4px; 
 border-radius: 4px; 
 font:18px Arial, Helvetica, sans-serif; 
 font-weight:bold; 
 color:#ffffff; 
 background:#8c2604; 
 -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
 -moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;  
 box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;  
  cursor:pointer;

  
 }

.wpcf7-submit:active{
 padding:11px 32px; 
 border:solid 1px #a2491c; 
 -webkit-border-radius:4px;
 -moz-border-radius:4px; 
 border-radius: 4px; 
 font:18px Arial, Helvetica, sans-serif; 
 font-weight:bold; 
 color:#ffffff; 
 background:#a2491c; 
 -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
 -moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;  
 box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;  
  cursor:pointer;

  
 }


.wpcf7-submit:focus{text-decoration:none; text-align:center; 
 padding:11px 32px; 
 border:solid 1px #a2491c; 
 -webkit-border-radius:4px;
 -moz-border-radius:4px; 
 border-radius: 4px; 
 font:18px Arial, Helvetica, sans-serif; 
 font-weight:bold; 
 color:#ffffff; 
 background:#a2491c; 
 -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
 -moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;  
 box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;  
  
   -webkit-transition: all 0.3s ease;
 -moz-transition:  all 0.3s ease;
 -o-transition:  all 0.3s ease;
  cursor:pointer;

 transition:  all 0.3s ease;}



.knopka {
text-align:center;
width:100%;
}
.table1 {
display:table;
width:100%;
font-size:16px;
border-collapse: separate; 
	border-spacing: 10px; 
	border: 0px solid red; 
}

.td1 {
text-align: left;
	border: 0px solid red; 
display:table-cell;
width:35%;
   vertical-align: middle;

}

.td3 {
text-align: center;
	border: 0px solid red; 
display:table-cell;
   vertical-align: middle;
}


.td {
text-align: left;
   vertical-align: middle;
	border: 0px solid red; 
display:table-cell;
}

.tr {
display:table-row;
	border: 0px solid red; 
}
    .inlineforma, .inlineforma2 {
           text-align:center;
    padding-top: 20px;
}


    .inlineforma:target {
    padding-top: 70px;
  }
        

@media all and ( min-width: 460px ) {

  .row {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  [class*="col-"] {
    display: table-cell;
          vertical-align:bottom;     
  }

  /* set col widths */

  .col-1-1 {
    width: 50%;
  }
  .col-1-2 {
    width: 50%;
  }
 
}




/* Middle
-----------------------------------------------------------------------------*/
.content {
            padding:30px 30px 30px;
}




/* Footer
-----------------------------------------------------------------------------*/
.footer {
        box-sizing: border-box;
        text-align:center;
    	
    	width: 100%;

}





/* если боьше 950пкс
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 950px) {
    a.vid{   

top:360px;
left:25px;

}

a.list {

    top: 360px;
left:245px;

}
    }

/* если меньше 950пкс
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 950px) {

      .swipe{
               display:block;
        position:fixed;
        top:0;
        left:0;
        z-index:201;
height:100vh;
width:25px;
    }

       .sw.sw1{
               display:block;
        position:fixed;
        top:0;
        left:0;
        z-index:200;
height:100vh;
width:100%;
    background-color: rgba(0, 0, 0, 0.3);
                                    transition:0.3s linear;
    }

    body {
background:#B4B4B4; 
    	font: 14px Arial, sans-serif;
        color:#2f2f2f;
	width: 100%;
}

    .wrapper {
    box-sizing: border-box;
    background-color: #fff;/*#fff #edecd5*/
	width: 100%;
	margin: 0 auto;
    box-shadow: 0 0 0px 0px #5e5c5c;
}


/* Header
-----------------------------------------------------------------------------*/
.header {
    width:100%;
    position:relative;
    height:auto;
                box-sizing: border-box;

}

.headbg{
      width:100%;
          height:auto;
    position:relative;
    top:0;
    left:0;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.7)), linear-gradient(290deg, #662221 49%, #57110f 50%);
                box-sizing: border-box;
    padding:20px;

}



.logo{
        margin:10px auto;
  width:120px;
    height:auto;
    position:relative;
    top:0;
    left:0;
   
}

.adv{
            margin:10px auto;
         width:100%;
    height:auto;
    position:relative;
    top:0;
    left:0;
  text-align:center;
  font-family: Chibola1, serif;
  color:#fff;
        font-size:40px;
                    letter-spacing: 6px;
                        z-index:100; 
}

img.advo{
    display:none;
}

.advok{
    display:block;
        width:50vmin;
    height:50vmin;
    min-width:150px;
    min-height:150px;
    max-width:450px;
    max-height:450px;
    position:relative;
    margin:20px auto;
    top:0;
    left:0;
  text-align:center;
   z-index:100;
   border:7px solid #fff;
   border-radius:50% 0 50% 0; 
   background-color:#fff;
   background-image:url(image/advokat.png), url(image/fotof.png);
   background-position:center center;
   background-size:contain;
}

.zaa{
            margin:10px auto;
      width:100%;
    height:auto;
    position:relative;
    top:0;
    left:0;
    text-align:center;
      color:#fff;
                  font: 36px Grad1, serif;
        line-height: 1.2;
            letter-spacing: 2px;
                z-index:100; 
 font-stretch:ultra-condensed;

}

a.vid, a.list{
    position:relative;
    display:block;
   }

a.vid:hover, a.list:hover{
    background-color: rgba(0, 0, 0, 0.8);
    transition: 0.1s linear;
                box-shadow: 0 0 3px 0px #000;
                color:#fff;
            text-decoration:none;
                        opacity:1;

}

a.vid{  
    
        background-image:url(image/video.png); 
        background-repeat: no-repeat;
        background-position: 10px 50%;
    margin:0 0 0 auto;
}

a.list {
        margin:auto 0 0 0 ;

        background-image:url(image/tel.png);
                background-repeat: no-repeat;
}
	
	  .table1 {
display:block;
width:100%;
font-size:16px;
border-collapse: separate; 
	border-spacing: 10px; 
	border: 0px solid red; 
}

.td1, .td {
display:block;
text-align: center;
	border: 0px solid red; 
 width:100%;
  vertical-align: middle;
  margin-bottom:5px;

}

.tr {
margin-bottom:20px;
display:block;
width:100%;
	border: 0px solid red; 
}

}

@media only screen and (max-width: 460px) { 
    a.vid, a.list {

margin:0 auto ;

    }
}