CSS My Little Hippo - mylittlehippo

Notes
All CSS is added to Divi Customiser
Not using a child theme
Divi Api key installed

Footer Display None

#footer-bottom {
display:none;
}

diamond Image section Divi Soup

/*————————————————–*/
/*Tutorial Diamond Image Section Layout by Divi Soup*/
/*————————————————–*/
.ds-diamond-section {
overflow: hidden;
}

.ds-diamond-image img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
-webkit-transition: all 1s;
transition: all 1s;
border-radius: 50%;
}

.ds-diamond-image img:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}

.ds-diamond-image {
border: 1px solid #000;
margin: 3px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.ds-diamond-row-1.et_pb_row {
width: 67%;
max-width: 67%;
margin: auto;
padding: 30px 0 0 0;
}

.ds-diamond-row-3.et_pb_row {
width: 67%;
max-width: 67%;
margin: auto;
padding: 0 0 30px 0;
}

.ds-diamond-row-2.et_pb_row {
padding: 0;
}

.ds-text-row.et_pb_row {
top: -80px !important;
}

.ds-diamond-title-inner h2 {
font-size: 40px;
margin-left: 38%;
margin-top: -50%;
text-transform: uppercase;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-text-fill-color: white;
-webkit-text-stroke-width: .5px;
-webkit-text-stroke-color: black;
}

.ds-diamond-title-outer h2 {
font-size: 40px;
margin-left: 39%;
margin-top: -45%;
text-transform: uppercase;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-text-fill-color: white;
-webkit-text-stroke-width: .5px;
-webkit-text-stroke-color: black;
}

@media only screen and (max-width: 1740px) {
.ds-diamond-title-inner h2,
.ds-diamond-title-outer h2 {
font-size: 35px;
}
}

@media only screen and (max-width: 1550px) {
.ds-diamond-title-inner h2,
.ds-diamond-title-outer h2 {
font-size: 30px;
}
}

@media only screen and (max-width: 1352px) {
.ds-diamond-title-inner h2,
.ds-diamond-title-outer h2 {
font-size: 25px;
}
}

@media only screen and (max-width: 1160px) {
.ds-diamond-title-inner h2,
.ds-diamond-title-outer h2 {
font-size: 20px;
}
}

@media only screen and (max-width: 980px) {
.ds-diamond-title-outer h2 {
font-size: 75px;
}
.ds-diamond-title-inner h2 {
font-size: 35px;
margin-bottom: 45%;
}
.ds-diamond-title-outer {
margin-bottom: 50% !important;
}
.ds-diamond-row-1.et_pb_row {
margin-bottom: 0 !important;
}
.ds-diamond-row-2.et_pb_row {
width: 94.5% !important;
padding: 8%;
margin-bottom: 100px !important;
}
}

@media only screen and (max-width: 880px) {
.ds-diamond-title-outer h2 {
font-size: 65px;
}
}

@media only screen and (max-width: 775px) {
.ds-diamond-title-inner h2 {
font-size: 30px;
}
.ds-diamond-title-outer h2 {
font-size: 55px;
}
}

@media only screen and (max-width: 680px) {
.ds-diamond-title-inner h2 {
font-size: 25px;
}
.ds-diamond-title-outer h2 {
font-size: 45px;
}
}

@media only screen and (max-width: 580px) {
.ds-diamond-title-inner h2 {
font-size: 18px;
}
.ds-diamond-title-outer h2 {
font-size: 40px;
}
}

@media only screen and (max-width: 480px) {
.ds-diamond-title-inner h2,
.ds-diamond-title-outer h2 {
font-size: 35px;
}
.ds-diamond-row-2.et_pb_row {
padding: 14%;
margin-bottom: -7% !important;
}
.ds-diamond-image {
margin-bottom: 0 !important;
}
.ds-diamond-title-inner h2,
.ds-diamond-title-outer h2 {
margin-left: 39%;
margin-top: -39%;
}
.ds-diamond-title-outer h2 {
margin-bottom: -5%;
}
.ds-diamond-row-1-last h2 {
margin-bottom: -25%;
}
}

@media only screen and (max-width: 460px) {
.ds-diamond-title-inner h2,
.ds-diamond-title-outer h2 {
font-size: 30px;
}
}

@media only screen and (max-width: 375px) {
.ds-diamond-title-inner h2,
.ds-diamond-title-outer h2 {
font-size: 25px;
}
}

@media only screen and (max-width: 340px) {
.ds-diamond-title-inner h2,
.ds-diamond-title-outer h2 {
font-size: 20px;
}
}

@media only screen and (min-width: 480px) and (max-width: 980px) {
.ds-diamond-row-2 .ds-diamond-image {
max-width: 93%;
}
}

/*——————————————————*/
/*Tutorial End Diamond Image Section Layout by Divi Soup*/
/*——————————————————*/

winterfell layout geno quiroz

/***********************************************
Custom CSS
***********************************************/
/* blurb hover style 1 */
@media only screen and (min-width : 981px) {
.mp_m_blurb_hover1 h4 {
color: #fff;}
.mp_m_blurb_hover1 .et_pb_blurb_container {
color: #fff!important;
margin-top: -70px;
padding: 7px;
z-index: 2;
position: relative;
opacity:0;
-webkit-transition: all .3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;}
.mp_m_blurb_hover1 .et_pb_main_blurb_image{
margin-bottom: 0px;
overflow: hidden;}
.mp_m_blurb_hover1 img {
vertical-align:top;
-webkit-transition: all .3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;}
.mp_m_blurb_hover1:hover img {
-webkit-transform: scale(1.05) rotate(1deg);
-ms-transform: scale(1.05) rotate(1deg);
transform: scale(1.05) rotate(1deg);}
.mp_m_blurb_hover1:hover .et_pb_blurb_container {
opacity:1;
background: rgba(226, 117, 72, 0.85);}}

/* custom quarter columns change from 4 to 3 */
@media only screen and (max-width : 1260px) {
.mp_column_1, .mp_column_2, .mp_column_4 {width: 33%!important;}
.mp_column_3 {display:none!important;}}

/* staff person module */
@media only screen and (min-width : 981px) {
.mp_m_staff_column:hover {
top: -8px;
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3);}}

/* row with 3 overlapping images */
@media only screen and (min-width : 981px) {
.mp-m-image_center {
width: 130%;
margin-left: -15%!important;
margin-top: -7%!important;
top: 0px;
transition-delay: 0s;
transition-duration: 0.35s;
transition-property: all;
box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.4);}
.mp-m-image_center:hover {
top: -8px;
box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.5);}
.mp_m_image_left {
margin-left: 45px!important;
margin-right: -45px!important;
transition-delay: 0s;
transition-duration: 0.45s;
transition-property: all;
box-shadow: 4px 0px 30px rgba(0, 0, 0, 0.4);}
.mp_m_image_left:hover {
margin-left: -15px!important;
margin-right: 15px!important;
box-shadow: 8px 0px 40px rgba(0, 0, 0, 0.5);}
.mp_m_image_right {
margin-left: -45px!important;
margin-right: 45px!important;
transition-delay: 0s;
transition-duration: 0.45s;
transition-property: all;
box-shadow: -4px 0px 30px rgba(0, 0, 0, 0.4);}
.mp_m_image_right:hover {
margin-left: 15px!important;
margin-right: -15px!important;
box-shadow: -8px 0px 40px rgba(0, 0, 0, 0.5);}}
/***************************************************
Winterfell Layout Pack by Geno Quiroz Custom CSS End
***************************************************/

Scroll to top button color

/* scroll to top button color */
.et_pb_scroll_top.et-pb-icon {
background: #ff6600;}
/* End scroll to top button color */

widget title

.widgettitle {
text-align:center;
font-size:18px;
padding-bottom: 20px;
}
.widgettitle {
border-bottom: solid 2px #000000;
margin-bottom: 25px;
}

blurbs

/* blurb */
.blurb-card .et_pb_main_blurb_image {
margin-bottom: 0 !important;
}
.blurb-card h6 {
color: #DC1D49;
margin-top: 20px;
}
.blurb-card .et_pb_button {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
zoom: 1;
filter: alpha(opacity=0);
opacity: 0;
}
.blurb-card .et_pb_blurb {
margin-bottom: 0 !important;
}
.blurb-card .et_pb_column {
position: relative;
}
.blurb-card .et_pb_blurb_container {
background: #fff;
padding: 75px 25px 25px 25px;
border-radius: 4px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, .08) !important;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, .08) !important;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .08) !important;
-webkit-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
-kthtml-transition: all 0.1s linear;
transition: all 0.1s linear;
margin-top: -50px;
}
.blurb-card .et_pb_column:hover .et_pb_blurb_container {
-webkit-box-shadow: 5px 15px 15px rgba(0, 0, 0, .2) !important;
-moz-box-shadow: 5px 15px 15px rgba(0, 0, 0, .2) !important;
box-shadow: 5px 15px 15px rgba(0, 0, 0, .2) !important;
-webkit-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
-kthtml-transition: all 0.1s linear;
transition: all 0.1s linear;
}

/* Effect 8 */
.blurb-card .et-pb-icon {
padding: 33px;
font-size: 35px;
position: relative;
z-index: 1;
color: #dc1d49 !important;
-webkit-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
-kthtml-transition: all 0.1s linear;
}
.blurb-card .et-pb-icon:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content: ”;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.blurb-card .et-pb-icon:before {
content: ”;
display: block;
}
.blurb-card .et-pb-icon {
background: rgba(255, 255, 255, 0.1);
-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
-moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
transition: transform ease-out 0.1s, background 0.2s;
}
.blurb-card .et-pb-icon:after {
top: 0;
left: 0;
padding: 0;
z-index: -1;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
opacity: 0;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
.blurb-card .et_pb_column:hover .et-pb-icon {
background: rgba(255, 255, 255, 0.05);
color: #fff !important;
-webkit-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
-kthtml-transition: all 0.1s linear;
}
.blurb-card .et_pb_column:hover .et-pb-icon:after {
-webkit-animation: sonarEffect 0.5s ease-out 50ms;
-moz-animation: sonarEffect 0.5s ease-out 75ms;
animation: sonarEffect 0.5s ease-out 75ms;
}
@-webkit-keyframes sonarEffect {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px #dc1d49, 0 0 10px 10px #dc1d49, 0 0 0 10px #dc1d49;
}
100% {
box-shadow: 0 0 0 2px #dc1d49, 0 0 10px 10px #dc1d49, 0 0 0 10px #dc1d49;
-webkit-transform: scale(1.5);
opacity: 0;
}
}
@-moz-keyframes sonarEffect {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px #dc1d49, 0 0 10px 10px #dc1d49, 0 0 0 10px #dc1d49;
}
100% {
box-shadow: 0 0 0 2px #dc1d49, 0 0 10px 10px #dc1d49, 0 0 0 10px #dc1d49;
-moz-transform: scale(1.5);
opacity: 0;
}
}
@keyframes sonarEffect {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px #dc1d49, 0 0 10px 10px #dc1d49, 0 0 0 10px #dc1d49;
}
100% {
box-shadow: 0 0 0 2px #dc1d49, 0 0 10px 10px #dc1d49, 0 0 0 10px #dc1d49;
transform: scale(1.5);
opacity: 0;
}
}
/* blurb */