File: /home/httpd/html/xdudes.com/templates/default_v3/styles/index.css
.siteContainer
{
width:100%;
display:flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
}
.contentContainer
{
width:100%;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition:0.6s;
margin:0 0 0 auto;
}
.contentContainer--filtersOpen
{
width:calc(100% - 260px);
transition:0.6s;
}
@media only screen and (max-width: 740px)
{
.contentContainer--filtersOpen
{
width:100%;
transition:0.6s;
}
}
.filters
{
width:0;
overflow: hidden;
height:calc(100vh - 58px);
transition:0.6s;
margin:0 10px 0 0;
background:var(--filtersBackground);
overflow-y: auto;
display:flex;
flex-direction: column;
transition:width 0.6s;
position:fixed;
top:58px;
z-index:99;
}
.filters--open
{
width:250px;
transition:width 0.6s;
}
@media only screen and (max-width: 740px)
{
.filters--open
{
/* width:100%; */
width: 250px;
transition:width 0.6s;
}
}
.filters__filterBtn
{
background:var(--buttonsBackground);
color:var(--buttonsColor);
border:2px solid var(--buttonsBackground);
margin:16px 0 30px 0;
display:flex;
flex-direction: row;
align-items: center;
justify-content: center;
text-align: center;
outline:none;
text-align: none;
height:46px;
width:100%;
font-size:20px;
font-family:var(--fontFamily);
font-weight: 500;
transition:0.4s;
padding:0 11px;
}
.filters__filterBtn i
{
margin:0 0 0 auto;
font-size:15px;
}
.filters__filterBtn:hover
{
color:var(--buttonsBackground);
background:var(--buttonsColor);
cursor: pointer;
}
.filters__quickLinks
{
font-size:18px;
line-height: 18px;
color:white;
font-weight: 500;
background:var(--filterTitleBackground);
width:100%;
height:42px;
padding:10px;
white-space: nowrap;
}
.filers__quickLink
{
outline:none;
text-decoration: none;
color:var(--filterTitleBackground);
font-size:16px;
line-height: 16px;
font-weight: 400;
border-bottom: 1px solid var(--filterTitleBackground);
padding:11px;
transition:0.4s;
white-space: nowrap;
}
.filers__quickLink:hover
{
opacity:0.6;
transition:0.4s;
}
.filters__dropDownBtn
{
font-size:18px;
line-height: 18px;
color:white;
font-weight: 500;
background:var(--filterTitleBackground);
border:1px solid var(--filterTitleBackground);
width:100%;
height:42px;
padding:10px;
display:flex;
flex-direction: row;
align-items: center;
justify-content: center;
transition:0.4s;
white-space: nowrap;
}
.filters__dropDownBtn i
{
font-size:15px;
line-height: 15px;
margin:0 0 0 auto;
transition:0.4s;
}
.filters__dropDownBtn:hover
{
background:transparent;
color:var(--filterTitleBackground);
transition:0.4s;
cursor: pointer;
}
.filters__dropDownBtn.active i
{
transition:0.4s;
transform:rotate(180deg);
}
.filters__dropDownList
{
list-style-type: none;
width:100%;
transition:.4s;
}
.filters__dropDownListItem
{
display: block;
}
.filers__dropDownLink
{
width:100%;
outline:none;
text-decoration: none;
color:var(--filterTitleBackground);
font-size:18px;
line-height: 18px;
font-weight: 400;
padding: 0 11px;
height: 0;
overflow: hidden;
white-space: nowrap;
display:flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
transition:0.4s;
}
.filers__dropDownLink:hover
{
transition:0.4s;
opacity:0.6;
}
.filers__dropDownLink i
{
display:none;
font-size:15px;
}
.filers__dropDownLink--active
{
color:var(--buttonsBackground);
font-weight: 500;
height:40px;
}
.filers__dropDownLink--active i
{
display:flex;
margin:0 0 0 auto;
}
.filters__dropDownList.active .filers__dropDownLink {
height: 40px;
}
.main
{
background:var(--mainBackground);
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
width:100%;
margin:58px 0 0 0;
}
.main__wrapper
{
display:flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin:18px 0 0 0;
width:100%;
}
.main__filterBtn
{
background:var(--buttonsBackground);
color:var(--buttonsColor);
border:2px solid var(--buttonsBackground);
margin:0 auto 0 0;
display:flex;
flex-direction: row;
align-items: center;
justify-content: center;
text-align: center;
outline:none;
text-align: none;
height:46px;
/* width:116px; */
width: 46px;
font-size:20px;
font-family:var(--fontFamily);
font-weight: 500;
transition:0.4s;
}
.main__filterBtn i
{
margin:0 0 0 0px;
font-size:15px;
}
.main__filterBtn:hover
{
color:var(--buttonsBackground);
background:var(--buttonsColor);
cursor: pointer;
}
.main__filterBtn--open
{
opacity:0;
transition:0.4s;
cursor:alias;
}
.main__select
{
background:var(--inputBackground);
color:white;
font-size:15px;
width:250px;
height:37px;
padding:0 10px;
font-weight: 500;
margin:0 13px 0 0;
}
@media only screen and (max-width: 500px)
{
.main__select
{
width:fit-content;
}
}
.main__text
{
width:100%;
margin:26px 0;
padding:0 13px;
display:flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap:10px;
}
.main__h1
{
font-size:20px;
font-weight: 600;
color:var(--titleColor);
width:100%;
}
.main__p
{
font-size:15px;
font-weight: 500;
color:var(--descriptionColor);
width:100%;
}
.main__container
{
width:100%;
/* display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr; */
}
#dataContent {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
#dataContent .main__model {
flex: 1 0 100%;
max-width: 20%;
}
@media only screen and (max-width: 1600px)
{
#dataContent .main__model
{
max-width: 25%;
}
}
@media only screen and (max-width: 1250px)
{
#dataContent .main__model
{
max-width: 33.333334%;
}
}
@media only screen and (max-width: 970px)
{
#dataContent .main__model
{
max-width: 50%;
}
}
@media only screen and (max-width: 500px)
{
#dataContent .main__model
{
max-width: 100%;
}
}
.main__model
{
width:100%;
aspect-ratio:10/7.5;
display:flex;
position:relative;
}
.main__modelPhoto
{
width:100%;
height:100%;
}
.main__modelWrapper
{
position:absolute;
width:100%;
height:100%;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition:0.1s;
overflow:hidden;
}
.main__modelInfo
{
margin:auto 0 0 0;
background:rgba(0, 0, 0, 0.767);
padding:6px 8px;
width:100%;
display:flex;
flex-direction: row;
align-items:center;
justify-content: center;
transition:0.2s;
}
.main__modelName
{
font-size:18px;
font-weight: 500;
color:white;
margin:0 auto 0 0;
}
.main__modelLive
{
width:53px;
height:21px;
border-radius:3px;
display:flex;
flex-direction: row;
align-items: center;
justify-content: center;
color:var(--liveBtnText);
background:var(--liveBtnGreen);
font-size:15px;
font-weight: 500;
transition:0.2s;
}
.main__modelLive i
{
font-size:8px;
margin:0 4px 0 0;
}
.main__modelEthnicity
{
background:rgba(0, 0, 0, 0.767);
padding:4px 8px;
width:100%;
height:33px;
font-size:16px;
font-weight: 500;
text-decoration: none;
color:white;
text-align: center;
}
.main__modelInfoWrapper
{
width:100%;
display:flex;
flex-direction: column;
margin:auto 0 0 0;
transition:0.2s;
transform: translateY(33px);
}
.main__modelEthnicity .name
{
color:var(--ethnicityColor);
}
.main__modelWrapperRow
{
width:100%;
display:flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding:14px 16px;
transition:0.4s;
opacity:0;
}
.main__modelWrapperRow i
{
font-size:26px;
color:var(--buttonsBackground);
}
.main__modelWrapperRow i:hover
{
color:white;
}
.main__modelLogo
{
max-height:30px;
max-width: 40%;
}
.main__modelBorder
{
position:absolute;
width:100%;
height:100%;
border:4px solid #191919;
}
.main__modelWrapper:hover
{
transition:0.2s;
}
.main__modelWrapper:hover .main__modelInfoWrapper
{
transition:0.2s;
transform:translateY(0);
}
.main__modelWrapper:hover .main__modelInfo
{
transition:0.2s;
background:rgba(255, 65, 87,0.767);
}
.main__modelWrapper:hover .main__modelLive
{
color:var(--liveBtnGreen);
background:var(--liveBtnText);
}
.main__modelWrapper:hover .main__modelWrapperRow
{
transition:0.2s;
opacity:1;
}
.breadcrumbs a {
background-color: #1a0710;
border-radius: 0.2em;
color: #fff;
display: inline-block;
padding: 0 5px;
white-space: nowrap;
font-size: 12px;
text-align: center;
margin-right: 5px;
}
.wrapper {
display: block;
position: relative;
padding-left: 12px;
padding-right: 12px;
box-sizing: border-box;
}
.wrapper *,
.wrapper *::before,
.wrapper *::after {
box-sizing: border-box;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin-left: -12px;
margin-right: -12px;
}
.lang-col, .tag-col {
flex: 1 0 100%;
max-width: 100%;
padding: 0 12px;
margin-bottom: 18px;
}
@media(min-width: 350px) {
.lang-col, .tag-col {
max-width: 50%;
}
}
@media(min-width: 768px) {
.lang-col, .tag-col {
max-width: 33.333334%;
}
}
@media(min-width: 1040px) {
.lang-col, .tag-col {
max-width: 20%;
}
}
@media(min-width: 1300px) {
.lang-col, .tag-col {
max-width: 16.666667%;
}
}
.lang-col a, .tag-col a {
display: flex;
align-items: center;
color: #000;
font-weight: 500;
text-decoration: none;
transition: color .4s ease 0s;
min-height: 30px;
}
.tag-col a {
justify-content: center;
}
.lang-col a:hover, .tag-col a:hover {
color: #ff4157;
text-decoration: none;
}
.lang-col a img {
margin-right: 10px;
width: 16px;
}
.text-center {
text-align: center;
}
.notification-col {
flex: 1 0 100%;
max-width: 100%;
padding: 0 12px;
margin-bottom: 24px;
}
.notification {
position: relative;
padding: 24px 12px;
margin-bottom: 12px;
}
.notification a {
display: inline-block;
font-weight: 700;
text-decoration: underline;
}
.notification.info {
color: #084298;
background-color: #cfe2ff;
border: 1px solid #b6d4fe;
}
.notification.info a {
color: #06357a;
}
.notification.alert,
.notification.warning {
color: #664d03;
background-color: #fff3cd;
border: 1px solid #ffecb5;
}
.notification.alert a,
.notification.warning a {
color: #523e02;
}
.notification.success {
color: #0f5132;
background-color: #d1e7dd;
border: 1px solid #badbcc;
}
.notification.success a {
color: #0c4128;
}
.notification.error {
color: #842029;
background-color: #f8d7da;
border: 1px solid #f5c2c7;
}
.notification.error a {
color: #6a1a21;
}
.form-col {
padding: 0 12px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.form-col.-access {
max-width: 560px;
}
.form-item {
flex: 1 0 100%;
max-width: 100%;
padding: 0 12px;
margin-bottom: 24px;
}
.form-item.-full {
max-width: 100%;
}
@media(min-width: 768px) {
.form-item.-half {
max-width: 50%;
}
}
.form-item.-links {
text-align: center;
}
.form-item.-links a {
font-size: 14px;
}
.form-item.-links a + a {
margin-left: 12px;
}
.form-item.-actions {
text-align: center;
margin-bottom: 0;
}
.form-item.-actions .btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 24px;
background-color: #ff4157;
border: 2px solid #ff4157;
color: #fff;
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
min-height: 42px;
cursor: pointer;
transition: background-color .4s ease 0s,
color .4s ease 0s;
}
.form-item.-actions .btn:hover {
background-color: #fff;
color: #ff4157;
}
.form-item.-actions .btn {}
.form-item label,
.form-item > .label {
display: block;
font-weight: 500;
margin-bottom: 5px;
}
.form-item input[type="text"],
.form-item input[type="password"],
.form-item input[type="email"],
.form-item input[type="tel"],
.form-item input[type="date"],
.form-item input[type="datetime"],
.form-item input[type="datetime-local"] {
display: block;
width: 100%;
border: 1px solid #454444;
height: 40px;
line-height: 38px;
font-size: 16px;
padding: 0 12px;
}
.captcha {
display: flex;
align-items: center;
}
.captcha img {
flex: 0 0;
height: 40px;
padding-right: 12px;
}
.captcha input {
flex: 1;
}
.checkbox,
.radio {
display: block;
}
.checkbox label,
.radio label {
display: block;
margin: 0;
}
.checkbox input[type="checkbox"],
.radio input[type="radio"] {
display: none;
}
.checkbox .sub-label,
.radio .sub-label {
display: block;
position: relative;
padding-left: 36px;
line-height: 24px;
min-height: 24px;
}
.checkbox .sub-label::before,
.radio .sub-label::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
border: 2px solid #454444;
}
.checkbox .sub-label::after,
.radio .sub-label::after {
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 16px;
height: 16px;
background-color: #ff4157;
opacity: 0;
transition: opacity .4s ease 0s;
}
.radio .sub-label::before,
.radio .sub-label::after {
border-radius: 50%;
}
.checkbox input[type="checkbox"]:checked + .sub-label::after,
.radio input[type="radio"]:checked + .sub-label::after {
opacity: 1;
}
textarea {
display: block;
width: 100%;
border: 1px solid #454444;
height: 120px;
line-height: 38px;
font-size: 16px;
padding: 0 12px;
}
.text-capitalize {
text-transform: uppercase;
}
.main-btn {
margin-top: 10px;
width: 150px;
}
.loader {
border: 8px solid #1a0710;
border-top: 8px solid #FF262A;
border-radius: 50%;
width: 90px;
height: 90px;
animation: spin 2s linear infinite;
-webkit-animation: spin 2s linear infinite; /* Safari */
margin: 0 auto;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.hidden {
display: none;
}
.open {
display: block!important;
}
.modal-open {
overflow: hidden;
}
.modal {
display: none;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
-webkit-overflow-scrolling: touch;
outline: 0;
padding-top: 100px;
}
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
.modal-content {
position: relative;
background-color: #ffffff;
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
-webkit-background-clip: padding-box;
background-clip: padding-box;
outline: 0;
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: rgba(0,0,0,.5);
}
.modal-header {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
padding: 1rem 1rem;
border-bottom: 1px solid #dee2e6;
border-top-left-radius: calc(.3rem - 1px);
border-top-right-radius: calc(.3rem - 1px);
}
.modal-header .btn-close {
padding: .5rem .5rem;
margin: -.5rem -.5rem -.5rem auto;
}
.modal-title {
margin-bottom: 0;
line-height: 1.5;
}
.modal-body {
position: relative;
padding: 15px;
}
.modal-footer {
padding: 15px;
text-align: right;
border-top: 1px solid #e5e5e5;
}
.btn-close {
box-sizing: content-box;
width: 1em;
height: 1em;
padding: .25em .25em;
color: #000;
background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
border: 0;
border-radius: .25rem;
opacity: .5;
}
button.close {
-webkit-appearance: none;
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
}
.close:hover, .close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
filter: alpha(opacity=50);
opacity: .5;
}
@media (min-width: 768px) {
.modal-dialog {
width: 600px;
margin: 30px auto;
}
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.modal-sm {
width: 300px;
}
}
@media (min-width: 992px) {
.modal-lg {
width: 900px;
}
}
[role="button"] {
cursor: pointer;
}
.hide {
display: none !important;
}
.show {
display: block !important;
}
.invisible {
visibility: hidden;
}
.text-hide {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.hidden {
display: none !important;
}
.affix {
position: fixed;
}
.btn {
display: inline-block;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn.btn-primary {
color: #fff;
background-color: var(--buttonsBackground);
border-color: var(--buttonsBackground);
}
.loadMoreContainer {
width: 100%;
grid-column: 1/6;
display: flex;
align-items: center;
justify-content: center;
}