.pb1 { display: block; min-height: 50vh; position: relative; } .pb1 .person { position: absolute; bottom: -200px; left: 50%; margin-left: -200px; width: 400px; height: 400px; } .pb1 .person .image { -moz-border-radius: 200px; -webkit-border-radius:	200px; -khtml-border-radius:	200px; border-radius: 200px; behavior: url(border-radius.htc); display: block; width:	400px; height:	400px; border: solid 4px white; background-color: green; background-image: url('/images/pages/home/alebedev.jpg'); background-repeat: no-repeat; background-position: 0 0; background-size: contain; -moz-box-shadow: 0px 0px 30px rgba(000,000,000,0.3); -webkit-box-shadow: 0px 0px 30px rgba(000,000,000,0.3); box-shadow: 0px 0px 30px rgba(000,000,000,0.3); } .pb1 .person .ptext { display: none; } .pb2 { display: block; background-color: white; padding-top: 240px; border-bottom: solid 2px white; } .pb2 .person { display: block; margin: 0; } .pb2 .person .name { display: block; font-size: 50px; font-weight: normal; line-height: 54px; white-space: nowrap; text-align: center; } .pb2 .person .post { display: block; font-size: 30px; font-weight: normal; white-space: nowrap; text-align: center; } .pb3 { display: block; background-color: white; padding: 80px 0; } .pb3 p.big { margin: 0 0 3em 0; } .pb4 { display: block; background-color: white; padding: 0px 0 0px 0; } .pb4 .items { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -20px; } .pb4 .items .item { display: block; vertical-align: top; min-width: 200px; text-decoration: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; width: calc( ( 100% - 40px ) / 3 ); margin: 0 20px 0 0; } .pb4 .items .item:nth-child(3) { margin: 0 0 0 0px; } .pb4 .items .item .title { display: block; line-height: 20px; text-align: left; color: white; font-weight: 400; font-size: 22px; text-decoration: none; padding: 10px 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer; } .pb4 .items .item .cnt { display: block; } .pb4 .items .item:nth-child(1) { border: solid 1px #00C322; } .pb4 .items .item:nth-child(2) { border: solid 1px #FF7A00; } .pb4 .items .item:nth-child(3) { border: solid 1px #D2006B; } .pb4 .items .item:nth-child(1) .title { background-color: #00C322; } .pb4 .items .item:nth-child(2) .title { background-color: #FF7A00; } .pb4 .items .item:nth-child(3) .title { background-color: #D2006B; } .pb4 .items .item .text { display: block; padding: 20px; font-size: 18px; color: #333; height: calc( ( 100% - 40px ) ); border-bottom: none; padding-bottom: 90px; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .pb4 .items .item .link { display: block; position: absolute; bottom: 20px; left: 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; text-align: center; width: calc( ( 100% - 40px ) ); } .pb4 .items .item .link .btn { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; background-color: #eee; display: inline-block; padding: 10px 20px; text-align: center; color: #555; border: solid 1px #eee; } .pb4 .items .item:hover .link .btn { border: solid 1px #ccc; } .pb4 .items .item:nth-child(1):hover { border-color: #259238; } .pb4 .items .item:nth-child(2):hover { border-color: #BF7530; } .pb4 .items .item:nth-child(3):hover { border-color: #9D2763; } .pb4 .items .item:nth-child(1):hover .title { background-color: #259238; } .pb4 .items .item:nth-child(2):hover .title { background-color: #BF7530; } .pb4 .items .item:nth-child(3):hover .title { background-color: #9D2763; } .pbcontacts { display: block; background-color: white; padding: 40px 0 40px 0; } @media all and (max-width: 500px) { .pb1 { min-height: 100vh; } .pb4 .items { display: block; margin: 0; width: 100%; } .pb4 .items .item { display: block; margin: 0; width: 100%; } .center-cnt { display: block; width: 100%; padding: 0 20px; } p.big { font-size: 12vw; line-height: 1.4em; margin: 0 0 1em 0; } p { font-size: 10vw; line-height: 1.4em; margin: 0 0 1em 0; } .pb3 p.big { margin: 0 0 2em 0; } .pb4 { border-top: solid 2px white; border-bottom: solid 2px white; } .pb4 .items .item { margin: 0 0 10vw 0; padding: 0px 0px; } .pb4 .items .item .text { padding: 20px 20px; } .pb4 .items .item .title { font-size: 10vw; line-height: 1.4em; } .pb4 .items .item .text { font-size: 10vw; line-height: 1.4em; } .pb4 .items .item .link { position: relative; margin: 20px 0; bottom: auto; } }