/* Notes for Mr. Donnaly found at the bottom of this sheet. */
* { font-family: 'Lato', sans-serif; font-family: 'Roboto', sans-serif; font-family: 'Roboto Condensed', sans-serif; text-transform: uppercase; }
body { background-color: black; color: white; }
.wrapper { max-width: 1150px; width: 100%; margin: auto; box-sizing: border-box; padding-left: 2%; padding-right: 2%; }
.wrapper header { position: relative; }
.wrapper img { width: 100%; }
.wrapper img.logo { padding-bottom: 4%; }
.wrapper img.phone { }
a {text-decoration: none; transition: 0.5s color ease; color: white;}

header img.email, header img.phone { position: absolute; bottom: 7%; }
header img.insta { position: absolute; bottom: 65px; }
header img.vimeo { position: absolute; bottom: 65px; }
header img.email { width: 31.4%; right: 0; }
header img.phone { width: 15.5%; left: 0; }
header img.vimeo { width: 40px; right: 50px; }
header img.insta { width: 40px; right: 0;}
.logo { margin: auto; display: block; }
.reel { position: relative; padding-bottom: 55.8%; height: 0; overflow: hidden; margi; margin-bottom: 4.5%; }
.reel iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.statement { background-image: url(img/dots-desktop.png); background-size: contain; height: 349px; background-repeat: no-repeat; width: 100%; padding-top: 29px; box-sizing: border-box; margin-bottom: 3%; }
.statement p { text-align: center; line-height: 1.85; font-size: 29px; }
.wrapper .clients { clear: both; display: block; margin: 0 auto; margin-bottom: 2.5%; box-sizing: border-box; }
ul { padding: 0 0 0 1.4%; list-style: none; float: left; display: inline; }
ul li { text-align: left; padding: 10px; font-size: 28px; line-height: 1; }
ul.first { padding-left: 0; }
video { width: 100% !important; height: auto !important; }
.show-for-desktop { display: block !important }
.show-for-tablet { display: none !important }
.show-for-mobile { display: none !important }
.wrapper .footer { padding: 4% 0 5%; box-sizing: border-box; }
footer img { width: 90%; }
@media only screen and (max-width:1150px) {
    .statement p, ul li { font-size: 2.4vw; }
    .statement { padding-top: 3vw; height: 29vw; }
    ul li { padding: .803vw; }
}
@media (min-width:1025px) {
    .wrapper .clients { margin-bottom: 3%; box-sizing: border-box; }
}
@media (max-width:1024px) {
    .show-for-desktop, .show-for-mobile { display: none !important }
    .show-for-tablet { display: block !important }
    .statement { background-image: url(img/dots-tablet.png); height: 53vw; background-position: center; }
    .statement p, ul li { font-size: 3.4vw; }
    .wrapper img.tablet-bone1 { max-width: 35%; margin-bottom: 1%; }
    .wrapper img.tablet-bone2 { width: 28%; margin-bottom: 2%; }
    .statement p { line-height: 2; }
    ul li { text-align: center; }
    ul { padding: 0; width: 50%; }
    .reel { margin-bottom: 6%; }
}
@media (max-width:768px) {
    .wrapper .logo { width: 63%; margin-bottom: 4vw; }
    header img.email { width: 40.4%; right: 37.2%; bottom: 9.5%; }
    header img.phone { width: 24.5%; top: 71%; left: 39.5%; }
    .wrapper header { position: relative; margin-bottom: 5%; margin-top: 8%; }

}
@media (max-width:600px) {
    .wrapper .logo { width: 83%; }
    header img.email { width: 52.4%; right: 32.9%; bottom: 7.7%; }
    header img.phone { width: 29.5%; top: 73%; left: 36.5%; }
    header img.insta, header img.vimeo {bottom: 7%; }
    ul { padding: 0; width: 100%; margin: 0; }
    .show-for-desktop, .show-for-tablet { display: none !important }
    .show-for-mobile { display: block !important }
    img.clients { width: 34%; max-width: 241px; padding-top: 5%; }
    .wrapper img.mobile-bone1 { max-width: 310px; margin-top: 3%; margin-bottom: 1%; }
    .wrapper img.mobile-bone2 { max-width: 180px; margin: 2% 0; width: 46%; }
    .wrapper img.mobile-bone3 { max-width: 405px; width: 74%; }
    .wrapper img.mobile-bone4 { max-width: 319px; }
    ul li { font-size: 17px; line-height: 1.2; }
    .statement p { line-height: 1.7; font-size: 3.8vw; }
    .statement { margin-bottom: 1%; }
}

/*Change the link color of on hover below:*/
.clients ul li a:hover { color: #a082a4;}