@import url(base.css);

.banner { background-color: #1e1e1e; clear: both; padding: 10% 0px; text-align: center; width: 100%; }
.banner h1 { color: #fff; font-size: 76px; font-weight:600; }
.banner h3 { color: #fff; font-size: 48px; }

.main-content { clear: both; padding: 25px 0px 50px; width: 100%; }
.main-content h2 { color: #9e005d; font-family: 'Sintony', sans-serif; font-size: 36px; font-weight: 700; margin: 25px 0px; text-transform: uppercase; position:relative; }
.main-content h2:before { content: ""; display: block; border-top: 1px solid #a10963; height: 1px; position: absolute; top: 50%; width: 100%; z-index: 1; }
.main-content h2 span { background: #fff; padding: 0px 20px 0px 0px; position: relative; z-index: 5; }

.models-area { clear: both; width: 100%; }
.models-area .col { flex-basis: auto; max-width: 16.666%; margin: 0px 0px 35px; text-align: center; }
.models-area p { color: #666; font-size: 20px; margin: 15px 0px; font-weight:500; }
.model { border: 5px solid #9e005d; border-radius: 100%; padding: 2px; position: relative; max-width: 190px; transition:all 0.3s ease-in-out; }
.model img { border: 5px solid #9e005d; border-radius: 100%; transition:all 0.3s ease-in-out; }
.model span { background-color: #00ff00; border-radius: 100%; bottom: 15px; display: block; height: 25px; position: absolute; right: 5px; width: 25px; z-index: 1; }
.model:hover { border-color:#de0082; transform:scale(1.2); }
.model:hover img { border-color:#de0082; }

/*-------------------
    Media Query
---------------------------*/

@media only screen and (max-width: 767px) {
    .banner h1 { color: #fff; font-size: 35px; }
    .banner h3 { color: #fff; font-size: 22px; }
    .main-content h2 { font-size: 25px; }
    .models-area .col { margin-bottom: 10px; max-width: 50%; }
    .models-area p { font-size: 20px; }
    .model span { height: 20px; width: 20px; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .banner h1 { color: #fff; font-size: 60px; }
    .banner h3 { color: #fff; font-size: 38px; }
    .models-area .col { margin-bottom: 10px; max-width: 25%; }
    .models-area p { font-size: 20px; }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .models-area p { font-size: 20px; }
    .model span { right: 0px; }
}