* {
    box-sizing: border-box;
}
::-moz-selection {
    background-color:#b3d4fc;
    text-shadow: none;
}
::selection {
    background-color:#b3d4fc;
    text-shadow: none;
}
::-webkit-scrollbar {
    width:10px;
    height: 12px;
    position: absolute
}
::-webkit-scrollbar-button {
    width: 12px;
    height: 6px;
    background-color: #f0f2f1;
}
::-webkit-scrollbar-thumb {
    background-color: #aeb4b8;
    border: 2px solid transparent;
    border-radius: 10px;
    background-clip: padding-box
}
::-webkit-scrollbar-thumb:hover {
    background-color: #80878c;
}
::-webkit-scrollbar-track {
    background-color: #f0f2f1;
}
html,
body,
p {
    margin:0;
    padding:0;
    text-decoration:none;
    font-size:16px;
    font-family:sans-serif,'Open Sans',Roboto;
    color:#80878c;
}
body {
    background:#f0f2f1;
    position:relative;
}
.text-top {
    text-align:center;
    margin:0 0 20px;
    font-size:48px;
    letter-spacing:-0.05em;
    font-family: 'Open Sans', Roboto;
	font-weight: 400;
    margin-top:20px;
}
h3,
footer {
    font-family:'Open Sans';
}
a {
    text-decoration:none;
    color:#f4645f;
}
.content {
    width:900px;
    position:relative;
    left:50%;
    margin-left:-450px;
}
p.info {
    margin:0 0 20px;
    text-align:center;
    letter-spacing:-.02em;
    color:#aeaeae;
    font-size:21px;
}
#about p {
    margin: 0 0 10px; 
    letter-spacing: -.02em; 
    text-indent: 1.5em;
}
#conteiner, 
#about {
    width:100%;
    border-radius:4px;
    box-shadow:0 1px 4px rgba(0,0,0,.2);
    overflow:hidden;
    margin-top: 20px;
}
#conteiner .block, 
#about .block {
    background:#fff;
    border-bottom:1px solid #dddfde;
    padding:10px 25px;
}
#conteiner .block:last-child, 
#about .block:last-child {
    border:none;
}
#conteiner .block .left {
    width:60%;
    display:inline-block;
    vertical-align:middle;
    float: left;
}
#conteiner .block .right {
    width:39%;
    display:inline-block;
    vertical-align:middle;
}
#conteiner .block h3, 
#about .block h3 {
    color:#f4645f;
    font-size:24px;
    font-weight:600;
}
#conteiner .block:nth-child(2n) .left {
    float:right;
}
#conteiner .block:nth-child(2n) .right .browser {
    left:-30px;
}
.browser {
    height: 240px;
    bottom: -10px;
    position: relative;
    right: -35px;
    border: 1px solid #ebebeb;
    border-top-left-radius:5px;
    -moz-user-select: none;
    -webkit-user-select: none;
    overflow:hidden;
}
.browser .htop {
    background: #ebebeb;
    padding: 5px 15px;
    border-top-left-radius: 5px;
    cursor:default;
}
.browser .htop .circle {
    display:inline-block;
    width:8px;
    height:8px;
    background:#fff;
    border-radius:50%;
}
.browser .htop .input {
    display:inline-block;
    background:#fff;
    font-size:10px;
    padding:2px 4px;
    vertical-align:middle;
    margin-left:10px;
    width:200px;
    cursor:text;
}
.browser .hinfo {
    overflow:hidden;
}
.browser .hinfo img {
    height:231px;
}
hr {
    width:100%;
    margin:10px 0;
    background:none;
    border:none;
    border-top:1px solid #dddfde;
}
footer {
    margin:20px;
    font-size:10px;
    cursor:default;
}
footer .likes {
    float:right;
    position:relative;
    width:120px;
    overflow:hidden;
    height:18px;
}
footer .likes i {
    color:#f4645f;
    font-size:18px;
    right:0;
    top:0;
    position:relative;
    vertical-align:middle;
}
footer .likes span {
    position:relative;
    right:-120px;
    transition:right 0.5s;
}
footer .likes:hover span {
    right:0px;
}

@media screen and (max-width: 900px) {
    .content {
        width: 90%;
        left: 5%;
        margin-left: 0;
    }
    #conteiner .block h3, #about .block h3 {
        text-align: center;
    }
    #conteiner .block .left {
        width: 100%;
        float: none;
    }
    #conteiner .block .right {
        width: 100%;
        float: none;
    }
    .browser {
        right: 0;
    }
    .browser .htop .input {
        width: calc(100% - 50px);
    }
    #conteiner .block:nth-child(2n) .right .browser {
        left: 0;
    }
}