@font-face {
font-family: ArialBold; 
src: url(//get-free-music.com/wp-content/themes/free-music/assets/fonts/arlrdbd.ttf);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
p, h1, h2, h3, h4, h5, h6 {
margin: 0;
}
.container {
max-width: 968px;
width: 100%;
display: flex;
flex-direction: column;
margin: 0 auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
}
main {
flex: 1 0;
}
.d-flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.logo-wrap {
padding-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
min-width: 240px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
}
.logo-img {
max-width: 280px;
max-height: auto;
}
.main-title {
font-family: Arial;
font-size: 32px;
color: #333333;
font-weight: 400;
line-height: 41px;
max-width: 650px;
text-align: center;
margin: 30px auto 0;
}
.main-title span {
font-weight: 700;
}
.queries-wrap {
margin-top: 35px;
align-items: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.start-title {
font-family: Arial;
font-size: 16px;
color: #333333;
font-weight: 400;
margin-right: 55px;
}
.input-search {
border: 2px solid #e69927;
height: 30px;
width: 350px;
border-radius: 5px;
outline: none;
padding: 4px 12px;
font-size: 14px;
}
.footer {
text-align: center;
padding: 20px 0 10px;
}
.contents {
color: #666666;
font-size: 12px;
font-family: AvenirRegular; 
}
.table-wrap {
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 35px;
}
.table-wrap table:first-child {
margin-right: 50px;
}
.sortable {
width: 40%;
border: 1px solid #bfbfbf;
border-collapse: collapse;
font-family: Arial;
}
td {
border: 1px dashed #7f7f7f;
padding-left: 12px;
}
tr:nth-child(even) {
background-color: #e8e8e8;
}
td a {
color: #4174b6;
line-height: 30px;
font-size: 14px;
font-weight: 700;
}
td a:hover,
.link-more:hover {
opacity: 0.7;
transition: all .2s ease-in;
}
.link-more {
font-family: Arial;
text-align: center;
margin-top: 5px;
color: #4174b6;
line-height: 30px;
font-size: 14px;
font-weight: 700;
}
.copyright {
font-size: 12px;
color: #333333;
font-family: ArialBold; 
font-weight: bold;
margin-top: 4px;
}
.copyright a {
color: #4ca3ff;
}
.copyright a:hover {
opacity: 0.7;
transition: all .2s ease-in;
}
.no-res {
text-align: center;
font-size: 20px;
padding: 5px 0;
}
.title-second {
max-width: 730px;
}
.orange {
color: #ff9835;
}
.img-wrap {
margin: 55px auto 0;
position: relative;
}
.img-wrap img {
border: 2px solid #ff9835;
height: auto;
width: 100%;
}
.actions-section {
font-family: Arial;
margin: 0 auto 30px;
}
.figures-wrap {
margin: 50px 0 0;
}
.action-wrap {
margin: 50px 0 0;
align-items: center;
}
.action-wrap img {
width: 80px;
height: 80px;
}
.action-wrap figcaption {
margin-left: 30px;
}
.action-wrap figcaption h4 {
color: #4d525a;
font-size: 22px;
line-height: 30px;
font-weight: normal;
}
.action-wrap figcaption h4 span {
font-weight: bold;
}
.action-wrap figcaption p {
color: #666666;
font-size: 18px;
line-height: 30px;
font-weight: normal;
}
.action-wrap figcaption p a {
color: #309aff;
}
#form-contact {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
max-width: 400px;
width: 100%;
margin: 40px auto 0;
text-align: center;
}
#contact-email {
width: 100%;
border-radius: 3px;
border-color: #ff9900;
height: 40px;
outline: none;
padding: 10px;
}
#contact-msg {
width: 100%;
border-radius: 3px;
border-color: #ff9900;
height: 200px;
margin-top: 20px;
outline: none;
padding: 10px;
}
.btn-submit {
background-color: #ff9900;
height: 60px;
color: #FFF;
text-align: center;
width: 100%;
border-radius: 3px;
font-size: 20px;
margin-top: 20px;
outline: none;
}
.btn-submit:hover {
opacity: 0.8;
transition: all .2s ease-in;
}
@media only screen and (max-width: 800px) { 
.container {
max-width: 750px;
padding: 0 15px;
}
.queries-wrap {
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
}
.main-title {
font-size: 28px;
}
.start-title {
margin-right: 0;
margin-bottom: 20px;
}
}
@media only screen and (max-width: 767px) { 
.table-wrap {
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
}
.sortable {
width: 100%;
}
#queires-table-f {
margin-right: 0;
}
.action-wrap img {
width: 50px;
height: 50px;
}
.action-wrap figcaption h4 {
font-size: 18px;
}
.action-wrap figcaption p {
font-size: 14px;
}
}
@media only screen and (max-width: 500px) { 
.main-title {
font-size: 20px;
}
.input-search {
width: 280px;
}
.img-wrap img {
height: auto;
width: 100%;
}
.action-wrap {
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
}
.action-wrap figcaption {
margin-left: 0;
margin-top: 10px;
text-align: center;
}
}
.img-wrap a img {
border: none;
width: 60px;
height; 40px;
position: absolute;
left: 50%;
margin-left: -30px;
top: 50%;
margin-top: -20px;
opacity: 0.5;
}
.img-wrap a img:hover {
opacity: 1;
transition: all .2s ease-in;
}