/*
Theme Name: Skeleton-child
Theme URI: http://studiox.com
Description: studio x Child Theme
Author:
Author URI: http://studiox.com
Template: Divi
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:
Text Domain: Skeleton-child
*/
/* move page content up to be flush with the top of the page and behind the nav menu*/
.et_pb_with_border.et_pb_row.et_pb_row_0{
margin-top: -207px;
}
/* move the welcome call outdown the page to below the nav menu */
.et_pb_with_border.et_pb_module.et_pb_text.et_pb_text_0.et_pb_bg_layout_light.et_pb_text_align_left{
margin-top: 227px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
padding: 20px;
width: 65%;
background-color: white;
opacity: 0.75;
}
/* text looked semi transparent, so set it to black to be sure */
.welcome-text{
opacity: 1;
color: black;
}
/* set mens/womens image to fille the frame */
.et_pb_image_wrap, .et_pb_image_0 img{
width: 100%;
}
.et_pb_image_1 img {
width: 100%;
}
/*
center buttons
*/
/* .et_pb_button_module_wrapper.et_pb_button_0_wrapper.et_pb_button_alignment_.et_pb_module{
text-align: center;
position:absolute;
top: 50%;
left: 50%;
color: white;
}
.et_pb_button_module_wrapper.et_pb_button_1_wrapper.et_pb_button_alignment_.et_pb_module{
text-align: center;
position:absolute;
top: 50%;
}
*/
.et_pb_button_0_wrapper,
.et_pb_button_1_wrapper{
text-align: center;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*
style buttons
*/
.et_pb_button.et_pb_button_0.et_pb_bg_layout_light, .et_pb_button.et_pb_button_1.et_pb_bg_layout_light{
color: white;
text-transform: uppercase;
}
/* move image back up the page - something keeps moving it down 207px lited as inline */
.et_pb_with_border.et_pb_row.et_pb_row_0{
/* margin-top: -207px; */
}
#et-main-area{
/* margin-top: 207px; */
}
/* hid the nav bar from spreadshirt */
#sprd-navigation, .sprd-promo-expander.sprd-c-m3.sprd-bg-s2.sprd-lbc-s1{
display:none;
}
#skel_shop{
margin-top: 207px;
min-height: 1080px;
height: 100%;
}
/* trying to get rid of the border around all divs */
/* === sometimes it's padding, sometimes a border set to 1 px === */
.et_pb_with_border.et_pb_row{
padding-top: 0px;
padding-bottom: 0px;
}
/* === increase space around images in amage list === */
.et_pb_image_2,
.et_pb_image_3,
.et_pb_image_4,
.et_pb_image_5,
.et_pb_image_6,
.et_pb_image_7{
padding-bottom: 30px;
}
.et_pb_with_border:nth-child(3){
padding-top:30px;
}
/* === style shop now button === */
.et_pb_button_2{
width: 100%;
}
/* === styles for phone === */
@media screen and (max-width: 479px) {
/* start of phone styles */
.et_pb_image_4 > a:nth-child(1) > span:nth-child(1){
height: 75%;
}
}
/*-----------------------------------------------*/
/*-----Scrolling Module Carousel by Divi Soup----*/
/*-----------------------------------------------*/
/*Carousel settings, adjust these values only*/
:root {
--ds-module-number: 18; /*Your TOTAL number of modules, so if you have 8 modules duplicated, this number should be 16*/
--ds-columns-desktop: 6; /*The number of modules you want displayed at any one time on desktop*/
--ds-columns-tablet: 3; /*The number of modules you want displayed at any one time on tablet*/
--ds-columns-mobile: 2; /*The number of modules you want displayed at any one time on mobile*/
--ds-speed-desktop: 30s; /*The speed you want your carousel to move on desktop (increase value for slower, decrease for faster)*/
--ds-speed-tablet: 30s; /*The speed you want your carousel to move on tablet (increase value for slower, decrease for faster)*/
--ds-speed-mobile: 30s; /*The speed you want your carousel to move on mobile (increase value for slower, decrease for faster)*/
}
/**************************************************/
/*You do not need to edit anything below this line*/
/**************************************************/
/*Variables for desktop*/
@media all and (min-width: 981px) {
:root {
--ds-column-width: auto;
--ds-module-width: calc(100vw / var(--ds-columns-desktop));
--ds-column-animation: calc(var(--ds-module-width) - (var(--ds-module-width) * 2));
--ds-scroll-speed: var(--ds-speed-desktop);
}
}
/*Variables for tablets*/
@media all and (max-width: 980px) {
:root {
--ds-column-width: auto;
--ds-module-width: calc(100vw / var(--ds-columns-tablet));
--ds-column-animation: calc(var(--ds-module-width) - (var(--ds-module-width) * 2));
--ds-scroll-speed: var(--ds-speed-tablet);
}
}
/*Variables for mobile*/
@media all and (max-width: 479px) {
:root {
--ds-module-width: calc(100vw / var(--ds-columns-mobile));
--ds-scroll-speed: var(--ds-speed-mobile);
}
}
/*Hide the row overflow*/
.ds-carousel {
overflow: hidden;
}
/*Define the grid and apply animation*/
.ds-carousel .et_pb_column {
display: grid;
grid-template-columns: repeat(var(--ds-module-number), var(--ds-module-width));
width: var(--ds-column-width);
-webkit-animation: scroll var(--ds-scroll-speed) linear infinite;
animation: scroll var(--ds-scroll-speed) linear infinite;
}
/*Apply the module width*/
.ds-carousel .et_pb_module {
width: var(--ds-module-width) !important;
}
/*Define the animation*/
@-webkit-keyframes scroll {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
}
}
@keyframes scroll {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
}
}
/*Pause animation on hover*/
.ds-carousel .et_pb_column:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
/*-----------------------------------------------*/
/*---End Scrolling Module Carousel by Divi Soup--*/
/*-----------------------------------------------*/