@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

#wrapper {
	background-color:#ffffff;
	width:100%;
}

#header {
	background: linear-gradient(5deg,#522a74,#65baea);
	width:100%;
	height:20%;
	min-height:100px;
}

#logo {
	width:50px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:15px!important
}

#services {
	text-align:center;
	font-family: 'Poppins', sans-serif;
	font-weight:700;
	text-transform:uppercase;
	color:#522a74;
	background:#f5f5f5;
	padding-top:35px;
	padding-bottom:25px;
	border: 1px solid #522a74;
	border-radius:5px;
	margin-top:50px;
	width:100%;
}

ul {
	list-style: none;
}

li {
	display: inline;
	margin-right:10%;
}

#container {
 max-width:70%;
 background-color:#FFFFFF;
 margin-left:auto;
 margin-right:auto;
 font-size:1.5rem;
}

h1 {
	text-align:center;
	font-family: 'Poppins', sans-serif;
	font-weight:400;
	font-size:3rem!important;
	text-transform:uppercase;
	margin-top:50px!important;
}

.logo {
	background-color:#555555;
}

.button-link {
	background: transparent;
	color:#522a74;
	padding:15px;
	border-radius:5px;
	border:1px solid #522a74;
	text-transform:uppercase;
	font-weight:700;
}

.button-link:hover {
	background: #522a74;
	color:#fff;
	text-decoration:none;
}

#logo img {width:50px}
#logo img {margin-top:25px}
#logo img {margin-bottom:10px}
#logo img {}
#container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#container > * {
    text-align: center;
}

#bokumo-logo img {
    max-width: 50%;
    width: auto;
    height: auto;
}

#bokumo-logo {
    margin-top: 50px;
}

.content {
    margin-top: 50px;
}

@media only screen and (max-width: 768px) {
    #wrapper {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    
    #header {
        width: 100%;
    }
    
    #services {
        background: none;
        border: none;
    }
    
    #services ul {
        list-style-type: none;
        padding-left: 0;
    }
    
    .button-link {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

@media only screen and (max-width: 768px) {
    #header {
        width: 100%;
    }
    
    #logo img {
        max-width: 100%;
        height: auto;
    }
}

@media only screen and (max-width: 768px) {
    #container {
        max-width: 100%;
    }
}

@media only screen and (max-width: 768px) {
    #bokumo-logo img {
        max-width: 100%;
    }
}