/*Power to the People=================================================================*/
#intro h1 {margin-bottom: 30px;}
#powerToPpl {margin-top: 7%;} /*figure html*/
#fist{margin-top: -40%; z-index: 2;}

/*Client Highlights ==================================================================*/
#ive {color: #400101; font-weight: 400; z-index: 5;}
#client {margin-top: -4%;}
#kikiArrow {width: 70px; position:relative; left: -5%; z-index: 3;}
#tyArrow {width: 70px; position: relative; top: -5%; left: 65%; rotate: -90deg; z-index: 4;}
#rikaArrow {width: 70px; position:relative; left: -5%; z-index: 3;}
#yellowHat {padding: 0px;}
#yellowHat figure {margin: 0px; padding: 0em;}

/*Client Info ======================================================================*/
.clientInfo {list-style-type: none; padding: 1em 0em; color: #010326; margin-top: -60px;}
.clientInfo .label {font-weight: 600;}
.clientInfo .data {font-weight: 400;}
.arrowhead {z-index: 3; float: left;}
#client {padding-left: 30px; padding-right: 30px;}

/* ABOUT ========================================================================*/
#why {margin-top: -3px;}
#why h3 {text-align: center; padding-top: 30px; padding-bottom: 30px;}
#why div {margin-top: 30px;}
#why p, #why li {font-size: 14px; line-height: 21px;}
#why h3 a, #why h3 a:hover, #why h3 a:visited {color: #f29f05; padding: 10px;}
#pointdown {padding-top: 12%; z-index: 6; position: absolute;}
#social li {list-style-type: none;}

/* SERVICES ===============================================*/
#services p {color: #75bfb8;}
#services {padding-top: 30px;}
#services .btn-primary {margin-bottom: 30px;}
#services .accordion-item {background-color: #0d0000; border: 1px solid #75bfb8;}
#services ul {
    list-style: none;
}
#services ul li {
    z-index: 10;
    line-height: 1.5em;
    margin-bottom: 7px;
}
#targets {z-index: 5;}
#services li:before {
    content: "+";
    margin-right: 4px;
}
#glassLady {
    margin-top: -30%;
}

/* CONTACT ==============================================*/
#contact, #why, #client { padding-top: 30px; padding-bottom: 30px;}
#contact h2 {
    font-weight: 200; 
    text-align: center;    
}

/* MEDIA QUERIES =====================================================================================*/
/*/ `xs` returns only a ruleset and no media query*/

/*`sm` applies to x-small devices (portrait phones, less than 576px)*/
@media only screen
and (max-width: 575.98px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
    #fist {margin-top: -90%;}
    #client {margin-top: -10%;}
    #ive {font-size: 1.3em; margin-bottom: 2em; padding-top: 7%;}
    #kikiArrow {top: -25%;}
    #rikaArrow {top: -30%;}
    #services {padding-top: 30px;}
    #services h2, #contact h2 {font-size: 2em}
    #services h3 {font-size: 1.8em;}
    #contact {margin-top: -5%;}
    #why h3 {font-size: 1.2em;}
    #client h4 {font-size: 1.14em;}
    #services p {font-size: 14px; line-height: 21px;}
}
/* `md` applies to small devices (landscape phones, less than 768px) */
@media only screen 
and (min-width: 575.99px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
    #ive {font-size: 2.5em;}
    #client {margin-top: -10%;}
    #contact {margin-top: -6%;}
    #kikiArrow {top: -10%;}
    #rikaArrow {top: -14%;}
    #services {padding-top: 30px;}
    #services p {font-size: 21px; line-height: 30px;}
}
/*/ `lg` applies to medium devices (tablets, less than 992px)*/
@media only screen 
and (min-width: 768px)
and (-webkit-min-device-pixel-ratio: 2) {
    #fist {margin-top: -70%;}
    #client {margin-top: -7%;}
    #ive {font-size: 3.3em;}
    #kikiArrow {top: -15%;}
    #rikaArrow {top: -17%;}
    #contact {margin-top: -6%;}
    #contact h2, #services h2 {font-size: 3em;}
    #services h3 {font-size: 2em;}
    #pointdown {padding-top: 2%;}
    #client h4 {font-size: 2.4em;}
    #why h3 {font-size: 2.4em;}
    #services {padding-top: 30px;}
    #services p {font-size: 21px; line-height: 30px;}
}
/*/ `xl` applies to large devices (desktops, less than 1200px) */
@media only screen 
and (min-width: 991.99px) {
    #ive {font-size: 3.7em; padding-top: 1.4em;}
    #fist {margin-top: -40%;}
    #kikiArrow {top: -22%;}
    #rikaArrow {top: -25%;}
    #contact h2, #services h2 {font-size: 4em;}
    #services h3 {font-size: 2em;}
    #why h3 {font-size: 2.4em;}
    #services {padding-top: 30px;}
    #services p {font-size: 21px; line-height: 30px;}
}
/*/ `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media only screen 
and (min-width: 1199.99px)
and (-webkit-min-device-pixel-ratio: 1) {
    #ive {font-size: 3em;}
    #fist {margin-top: -40%;}
    /*#client {margin-top: -60px;}*/
    #kikiArrow {top: -27%;}
    #rikaArrow {top:-33%;}
    #services {/*margin-top: -12%;*/ padding: 30px;}
    #pointdown {padding-top: 0px;}
    #contact {margin-top: -4%;}
}