/* The browser window */
.browser-container {
    max-width:400px;
    max-height:400px;
    margin: 0 auto;
    margin-bottom:25px;
    border: 3px solid;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    box-shadow: 1px 1px 10px -5px rgba(0,0,0,0.75);
}

.browser-container img {
    position: unset !important;
}

/* Container for columns and the top "toolbar" */
.browser-header-row {
    padding: 10px;
}

/* Create three unequal columns that floats next to each other */
.browser-header-row .column {
    float: left;
}

.browser-header-row .left {
    width: 20%;
    text-align: left;
}

.browser-header-row .right {
    width: 10%;
}

.browser-header-row .middle {
    width: 70%;
}

/* Clear floats after the columns */
.browser-header-row:after {
    content: "";
    display: table;
    clear: both;
}

/* Three dots */
.browser-header-row .dot {
    margin-top: 4px;
    height: 12px;
    width: 12px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
}

/* Style the input field */
.browser-container .browser-url {
    width: 100%;
    border-radius: 3px;
    border: none;
    background-color: white;
    text-align: center;
    font-size:14px;
    text-transform: uppercase;
    height: 25px;
    color: #666;
    max-width: 230px;
    margin: 0 auto;
}

.browser-container .browser-url a {
    color:inherit;
}

/* Three bars (hamburger menu) */
.browser-container .bar {
    width: 17px;
    height: 3px;
    background-color: rgb(231, 231, 231);
    margin: 3px 0;
    display: block;
}

.browser-container .content img {
    width:100%;
}