html, body { -webkit-tap-highlight-color:transparent; height: 100%; padding: 0; font: 14px "OmnesATT Regular", "Lucida Grande", Helvetica, Arial, sans-serif; }
a { color: #00B7FF; text-decoration: none; }
h1 { font-size: 24px; font-weight: bolder; }
#mkPromiseBtn { margin: 10px 0; padding: 10px; font-size: 20px; cursor: pointer; color: #FF7000; }
.content { height: 100%; margin: 0 auto; position: relative; }
.m-valigned-content { display: table-cell; vertical-align: middle; }
.hidden { display: none; }
.no-show { opacity: 0; }
.visible { opacity: 1; }
div.view { top: 100px; position: relative; }
.clearfix { clear: both; }
.close { opacity: 1; }
.nvis { visibility: hidden; }
.navbar { margin-bottom: 0; font: 22px "OmnesATT Regular Italic"; }
.navbar li { text-align: left; }
.navbar-default { padding-top: 30px; border-top: none; z-index: 1; }
.main-header .navbar-default { top: 37px; padding-top: 0; border-top: 1px solid #e7e7e7; }
.navbar-brand { font: 22px "OmnesATT Regular Italic"; }
.navbar-toggle { margin-top: 20px; padding: 10px 15px; border: none; background-color: transparent; background-image: url('../images/spredfast-filter-expanded.png'); background-repeat: no-repeat; }
.navbar-toggle.collapsed { background-color: transparent; background-image: url('../images/spredfast-filter-collapse.png'); background-repeat: no-repeat; }
.navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: transparent;
}
a#downloadResourcesLink
{
padding-left: 0px;
text-align: left;
margin-bottom: 70px;
}
a#downloadResourcesLink:hover
{
text-decoration:none;
}
.content-name { text-transform: uppercase; }
.dim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background-color: rgba(0,0,0,.15); z-index: 100; }
/*
* Main header
*/
section.main-header { height: 100px; width: 100%; padding: 10px 0 0; position: fixed; text-align: center; z-index: 10000; background: transparent; -webkit-transform: translateZ(0); }
section.main-header.bgfade {
background: #FFF;
}
section.footer { width: 100%; padding: 15px 0; position: relative; z-index: 10000;
background: #093483; /* Old browsers */
background: -moz-linear-gradient(left, #093483 0%, #057ab5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#093483), color-stop(100%,#057ab5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #093483 0%,#057ab5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #093483 0%,#057ab5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #093483 0%,#057ab5 100%); /* IE10+ */
background: linear-gradient(to right, #093483 0%,#057ab5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#093483', endColorstr='#057ab5',GradientType=1 ); /* IE6-9 */
}
.main-header .logo { width: 150px; height: 125px; vertical-align: middle; cursor: pointer; display: inline-block; background-image: url('../images/logo.png'); background-repeat: no-repeat; background-size: 150px 125px; }
.main-header a { text-decoration: none; }
.main-nav { margin: 0 0 0 10px; position: relative; display: inline-block; }
.main-nav li { margin: 0 5px; float: left; font: 20px "OmnesATT Medium Italic"; }
.main-nav li,
.main-nav li a { padding: 6px 10px; color: #666; cursor: pointer; }
.main-nav li#contestLink a { color: #431aa0; }
.main-nav li#contestLink a:hover,
.main-nav li#contestLink a.active { color: #fff; background-color: #431aa0; }
.main-nav li a:hover,
.main-nav li a.active { background-color: #f67a00; color: #FFF; border-radius: 4px; padding: 5px 10px; }
.main-nav .form-anchor-link .right-carret { width: 6px; height: 8px; display: inline-block; margin-right: 4px; position: relative; top: -1px; background-image: url('../images/caret-right.png'); background-repeat: no-repeat; }
.main-nav .form-anchor-link { display: block; color: #006AAB; font-size: 14px; text-align: right; padding-top: 2px; }
.main-nav .form-anchor-link:hover { background: none; color: #F58100; }
.mobile-links { display: none; }
.page { transition: all 200ms ease-out; left: 0; background: #fff !important; position: relative; z-index: 2;}
/*
* Hero section
*/
section.hero { color: #fff; position: relative; background-repeat: no-repeat; background-position: center center; background-size: auto 100%; }
iframe { margin: 0 auto; display: block; }
.card button { font: 24px "OmnesATT Regular Italic"; text-transform: uppercase; margin: 0; background: #F17100; border: 0; border-radius: 4px; color: #fff; padding: 10px 20px; cursor: pointer; }
.card button:hover { color: #F17100; background: #fff; }
.card button:active { color: #fff; background: #F17100; }
.card.video { height: 405px; background: #ccc; /* background-position: center center; background-image: url('../images/video.jpeg'); */ position: relative; }
.card.video p { position: absolute; vertical-align: middle; bottom: 20px; right: 20px; font: 28px "OmnesATT Medium Italic"; }
.card.video iframe { position:relative; height:100% }
.card.video .icon { width: 71px; height: 71px; margin: -35.5px 0 0 -35.5px; top: 50%; left: 50%; position: absolute; display: inline-block; background-image: url('../images/itc_video_play_btn.png'); display:none; }
.card.before-you-drive { text-align: center; height: 405px; background-color: #ebebeb; color: #000; position: relative; padding: 35px; display: inline-block; box-sizing: border-box; font-size: 20px; }
.card.before-you-drive img { position: relative; margin-top: -25px; }
.card.before-you-drive p { position: relative; padding: 10px 65px; display: block; color: #fff; font: 24px "OmnesATT Medium"; }
.card.before-you-drive .tag { position: relative; padding: 10px 65px; display: block; color: #fff; font: 19px "OmnesATT Light Italic"; }
.card.keep-your-eyes-on-the-road { text-align: center; height: 405px; background-color: #ebebeb; color: #000; position: relative; padding: 35px; box-sizing: border-box; font-size: 20px; }
.card.keep-your-eyes-on-the-road img{ position:relative;width:100%;}
.card.keep-your-eyes-on-the-road p { position: absolute;padding: 0px 0px;top: 270px;width: 100%;display: block;color: #fff;font: 33px "OmnesATT Medium"; }
.card.keep-your-eyes-on-the-road .tag{ position: relative; padding: 10px 65px; display: block; color: #fff; font: 27px "OmnesATT Light Italic"; }
.card.tips { height: 210px; padding: 15px; position: relative; box-sizing: border-box; color: #ef7101; cursor: pointer;
background: #e8e8e8; /* Old browsers */
background: -moz-linear-gradient(45deg, rgba(234,234,234,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(234,234,234,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, rgba(234,234,234,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, rgba(234,234,234,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, rgba(234,234,234,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(45deg, rgba(234,234,234,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.card.tips > div { display: inline-block; padding-top: 60px; width: 75%; }
.card.tips img { margin-top: -85px; position: relative; display: inline-block; }
.card.tips span { font: 40px "OmnesATT Medium Italic"; line-height: 40px; display: block; }
.card.tips p { font: 20px "OmnesATT Regular Italic"; display: block; }
.card.tell-everyone { height: 210px; text-align: center; box-sizing: border-box; letter-spacing: 2px; font: 25px "OmnesATT Bold Italic", sans-serif;
background: #093483; /* Old browsers */
background: -moz-linear-gradient(0deg, #fcb314 0%, #ff7200 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#fcb314), color-stop(100%,#ff7200)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(0deg, #fcb314 0%,#ff7200 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(0deg, #fcb314 0%,#ff7200 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(0deg, #fcb314 0%,#ff7200 100%); /* IE10+ */
background: linear-gradient(0deg, #fcb314 0%,#ff7200 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcb314', endColorstr='#ff7200',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.card.pledge { height: 210px; text-align: center; box-sizing: border-box; letter-spacing: 2px; font: 25px "OmnesATT Bold Italic", sans-serif;
background: #093483; /* Old browsers */
background: -moz-linear-gradient(45deg, #093483 0%, #057ab5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#093483), color-stop(100%,#057ab5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #093483 0%,#057ab5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #093483 0%,#057ab5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #093483 0%,#057ab5 100%); /* IE10+ */
background: linear-gradient(45deg, #093483 0%,#057ab5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#093483', endColorstr='#057ab5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.card.meme { height: 210px; background-color: #26a1d5; background-image: url('../images/drivemode-tout.png'); background-position: 0 bottom; background-repeat: no-repeat; }
.card.meme span { font: 34px "OmnesATT Medium Italic"; line-height: 40px; }
.card.meme p { font: 18px "OmnesATT Medium Italic"; color: #A6D9EF; }
.card.meme > div { padding: 21px 75px; }
.card.meme .contents { position: relative; right: -50px; }
.card.meme.mobile { background-image: none; height: 355px;}
.card.meme .btn { font: 24px "OmnesATT Medium Italic";
text-transform: uppercase;
margin: 0;
background: #cde4ef;
border: 0;
border-radius: 4px;
color: #006699;
padding: 10px 20px;
cursor: pointer;
}
.card.meme .btn:hover { color: #006699; background: #fff; }
.card.meme .btn:active { color: #fff; background: #006699; }
.card.meme .gears-icon-large { background: url('../images/gears-blue-large.png') no-repeat 0 0; width: 18px; height: 19px; display: inline-block; top: 1px; margin-right: 2px; position: relative; }
.card.meme .btn:hover span { background-image: url('../images/gears-blue-large.png'); }
.card.meme .btn:active span { background-image: url('../images/gears-white-large.png'); }
.card.tell-everyone .pledge-counter { font: 40px "OmnesATT Medium Italic"; line-height: 25px; }
.card.tell-everyone p { font: 32px "OmnesATT Light Italic"; letter-spacing: 0; margin-bottom: 17px; }
.card.tell-everyone .btn.twitter { margin-top: 15px; background: #02aae3; border-radius: 4px; border: 1px solid #35bbe9; font: 22px "OmnesATT Medium Italic", sans-serif; padding: 2px 5px 3px 15px; color: #fff; line-height: 36px; }
.card.tell-everyone .btn.twitter > span { top: 2px; position: relative; }
.card.tell-everyone .btn.twitter img { width: 60px; }
.card.pledge .pledge-counter { font: 40px "OmnesATT Medium Italic"; line-height: 25px; }
.card.pledge p { font: 18px "OmnesATT Light Italic"; letter-spacing: 0; margin-bottom: 17px; }
.card.social { text-align: center; color: #094f95; box-sizing: border-box; position: relative; }
.card.social .title { font: 36px "OmnesATT Light Italic"; margin: 0; }
.card.social p { font: 18px "OmnesATT Medium Italic"; line-height: 24px; text-transform: uppercase; }
.card.social .icons { cursor: pointer; }
.card.social .icons span { padding: 5px; width: 50px; height: 50px; margin-right: 15px; display: inline-block; background-position: center center; background-repeat: no-repeat; }
.card.social .icons span:hover { background-size: 45px 45px; }
.card.social .icons span:active { background-size: 45px 45px; }
.card.social .icons span.twitter:hover { background-size: 51px 41px; }
.card.social .icons span.twitter:active { background-size: 48px 38px; }
/*.card.social .twitter { background-image: url('../images/twitter-icon-large-blue.png'); }*/
.card.social .instagram { background-image: url('../images/instagram-icon-reg.png'); }
.card.social .vine { background-image: url('../images/social-icon-vine.png'); }
.card.social .btn.twitter { margin-top: 15px; background: #02aae3; border-radius: 4px; border: 1px solid #35bbe9; font: 22px "OmnesATT Medium Italic", sans-serif; padding: 2px 5px 3px 15px; color: #fff; line-height: 36px; }
.card.social .btn.twitter > span { top: 2px; position: relative; }
.card.social .btn.twitter img { width: 60px; }
.social-wide { border-bottom: 1px solid #e3e3e3; background-color: #fff; }
.social-wide > div { padding: 10px; color: #333; }
.hero > .content { opacity: 1;
-webkit-transition-duration: 600ms;
-moz-transition-duration: 600ms;
-o-transition-duration: 600ms;
transition-duration: 600ms;
}
.content.hide { opacity: .1; }
/* facebook friend */
.friend-picture { border-radius: 100%; width: 300px; height: 300px; display: block; overflow: hidden; border: 5px solid #fff; margin: 0 auto; }
.make-promise { display:none; }
.facebook-btn { margin: 30px auto; width: 373px; height: 72px; display: none; cursor: pointer; background-image: url('../images/facebook_btn.png'); background-repeat: no-repeat; }
.facebook-btn.show,
.make-promise.show { display: block; }
.explore-cta { min-width: 960px; position: relative; bottom: 70px; text-align: center; cursor: pointer; }
.explore-cta p { font-style: italic; font-size: 24px; }
.caret-down { margin: 10px 0; width: 21px; height: 11px; display: inline-block; background-image: url('../images/caret_down.png'); background-repeat: no-repeat; }
.loader { display: none; position: absolute; top: 0; left: 0; background: rgba(0,0,0,.5); width: 100%; height: 100%; }
.loader .content { display: table; vertical-align: middle; text-align: center; }
.loader img { display: block; margin: 0 auto; top: 50%; position: relative; margin-bottom: 30px; }
/*
* Support section
*/
section.support-us { height: 500px; }
.support-us .image { display: block; width: 694px; height: 355px; top: -28px; position: relative; background-image: url('../images/before-you-drive.png'); background-repeat: no-repeat; }
.support-us .copy { line-height: 33px; position: relative; display: inline-block; left: 330px; top: -110px; max-width: 600px; }
.support-us p { margin-bottom: 20px; }
.support-us .btn { color: #fff; padding: 5px 15px; margin-right: 12px; font: 20px "OmnesATT Medium Italic", sans-serif; }
.support-us .btn.disabled { background-color: #565656; cursor: default; }
.support-us .twitter.btn { background-color: #7DD6F7; }
/* Sprefast stream filters */
.spredfast .filter { padding: 50px 30px; text-align: center; font: 22px "OmnesATT Regular Italic", sans-serif; background-image: url('../images/filter-shade.png'); background-position: 0 -305px; background-repeat: no-repeat; }
.spredfast .filter li { display: inline-block; position: relative; }
.spredfast .filter li a { padding: 4px 20px; margin: 0 10px; border-radius: 4px; cursor: pointer; text-decoration: none; color: #666; }
.spredfast .filter li a:hover { color: #F17100; }
.spredfast .filter li a.active { background-color: #F17100; color: #fff; }
.spredfast .filter li a.active:before { content: ''; width: 0; height: 0; display: block; position: absolute; border-top: 10px solid #F17100; border-right: 10px solid transparent; border-left: 10px solid transparent; bottom: -14px; left: 50%; margin-left: -10px; }
.infoGraphIcon { width: 22px; height: 14px; background-image: url('../images/info-graph-icon-grey.png'); display: inline-block; margin-right: 5px; }
.spredfast .filter li a:hover .infoGraphIcon { background-image: url('../images/info-graph-icon-orange.png'); }
.spredfast .filter li a.active .infoGraphIcon { background-image: url('../images/info-graph-icon-white.png'); }
section.spredfast .block { position: relative; box-sizing: border-box; word-wrap: break-word; cursor: pointer; overflow: hidden; }
section.spredfast .whats-hot .block { word-wrap: normal; overflow: visible; height: auto !important; cursor: default; padding: 0; }
section.spredfast .whats-hot .wide:nth-child(even) { background-color: #f2f2f2; }
.spredfast img { width: 100%; }
.clipper { display: table; width: 100%; height: 100%; }
.block.youtube p,
.block.instagram p { font: 14px "OmnesATT Regular Italic"; }
.block.youtube,
.block.instagram { padding: 0; color: #fff; }
.block.whats-hot { padding: 0; color: #666; }
.whats-hot.disclaimer { padding: 100px 0; font: 18px "OmnesATT Regular Italic"; color: #999; }
.block.whats-hot .source { font: 114px "OmnesATT Light Italic"; line-height: 114px; border-bottom: 1px solid #ccc; margin-bottom: 15px; padding-bottom: 15px; }
.block.whats-hot .article-title { font: 24px "OmnesATT Light Italic"; color: #999; margin: 0 10px 0 0; }
.block.whats-hot.large .source { font: 42px "OmnesATT Light Italic"; line-height: 59px; }
.block.whats-hot a { font: 14px "OmnesATT Light Italic"; display: inline-block; background: #666; color: #fff; padding: 5px 12px; margin-top: 15px;
-ms-transform: skew(-14deg,0deg); /* IE 9 */
-webkit-transform: skew(-14deg,0deg); /* Chrome, Safari, Opera */
transform: skew(-14deg,0deg);
}
.block.whats-hot a:hover { background-color: #F17100; color: #fff; text-decoration: none; }
.masonry-grid .block.whats-hot.col-sm-2 { width: 40%; margin: 2% 5%; }
.block.youtube img,
.block.instagram img { position: absolute; left: 0; top: 0; transition: all 200ms ease-in-out; }
.block.whats-hot img { position: relative; transition: all 200ms ease-in-out; }
.block.instagram span { transition: all 200ms ease-in-out; }
.block.instagram p { transition: all 200ms ease-in-out; }
.block.youtube:hover img,
.block.instagram:hover img,
.block.whats-hot:hover img { transform: scale(1.5); opacity: 0.4; }
.block.instagram .tag { font: 20px "OmnesATT Regular Italic"; }
.block.instagram.thin img { width: auto; height: auto; left: -234px; }
.block.instagram .icon { width: 41px; height: 40px; display: inline-block; background-image: url('../images/instagram-icon-white.png'); background-repeat: no-repeat; background-position: center center; }
.callout .icon.twitter { display: inline-block; padding: 5px; width: 50px; height: 50px; background-image: url('../images/twitter-icon-large-blue.png'); background-repeat: no-repeat; background-position: center center; }
.callout .icon.instagram { display: inline-block; padding: 5px; width: 50px; height: 50px; background-image: url('../images/instagram-icon-reg.png'); background-repeat: no-repeat; background-position: center center; }
.callout .icon.twitter:hover { background-size: 51px 41px; }
.callout .icon.twitter:active { background-size: 48px 38px; }
.callout .icon.instagram:hover { background-size: 45px 45px; }
.callout .icon.instagram:active { background-size: 42px 42px; }
.block.twitter { background-color: #fff; text-align: center; }
.block.twitter.wide,
.block.twitter.thin,
.block.twitter.large { /* background-color: rgba(0,0,0,1); */ background-color: #1192be; color: #fff; padding: 30px; border-bottom: 4px solid #1192be;
background: #0099cc; /* Old browsers */
background: -moz-linear-gradient(45deg, #0099cc 0%, #5bafcc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#0099cc), color-stop(100%,#5bafcc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #0099cc 0%,#5bafcc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #0099cc 0%,#5bafcc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #0099cc 0%,#5bafcc 100%); /* IE10+ */
background: linear-gradient(45deg, #0099cc 0%,#5bafcc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0099cc', endColorstr='#5bafcc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.block.twitter.thin { padding: 0; }
.block.vine .sn,
.block.twitter .sn { font: 18px "OmnesATT Medium Italic"; color: #3399cc; position: relative; z-index: 1000; }
.block.twitter .twt-text { font: 14px "OmnesATT Regular Italic"; color: #666; margin: 10px 0; line-height: 17px; position: relative; z-index: 1000; }
.block.twitter.wide .sn,
.block.twitter.large .sn,
.block.twitter.thin .sn,
.block.twitter.large .twt-text,
.block.twitter.thin .twt-text,
.block.twitter.wide .twt-text { color: #fff; padding: 0 40px; }
.block.twitter img { position: absolute; top: 0; left: 0; z-index: 1; }
.block.twitter .icon { width: 22px; height: 18px; display: inline-block; background-image: url('../images/twitter-icon-small-white.png'); }
.block.twitter.thin .icon { background-image: url('../images/twitter-icon-small-white.png'); }
.block.twitter.small .icon { width: 22px; height: 18px; display: inline-block; background-image: url('../images/twitter-icon-small-blue.png'); }
.block.twitter .twt-bg { position: absolute; top: 0; left: 0; z-index: 1;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
/*filter: url(desaturate.svg#greyscale);*/
opacity: .5;
}
.block.twitter .color-overlay { width: 100%; height: 100%; position: absolute; background-blend-mode: multiply; background-color: rgba(38,161,213,.5); z-index: 500; top: 0; left: 0; }
.block.youtube { padding: 0; color: #FFF; text-align: center; }
.block.youtube .widescreen { width:100%; height:0; position:relative; padding-bottom:50%; }
.widescreen > .valign-middle { width:100%; height:100%; position:absolute; top:0; left:0; }
.block.youtube .icon { width: 53px; height: 48px; display: inline-block; position: relative; background-image: url('../images/youtube-play-button.png'); background-repeat: no-repeat; background-position: center center; }
.block.youtube img { position: absolute; top: -25%; left: 0; }
.block.share-your-x { font: 44px "OmnesATT Regular Italic"; color: #ff6600; text-align: center; }
.profile-image { position: relative; z-index: 1000; width: 48px; height: 48px; display: inline-block; vertical-align: middle; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; overflow: hidden; }
.spredfast .fb-name { color: #006AAB; font: 20px "OmnesATT Medium", sans-serif; }
.block.vine {
background: #55e88d; /* Old browsers */
background: -moz-linear-gradient(-45deg, #55e88d 0%, #4ed390 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#55e88d), color-stop(100%,#4ed390)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #55e88d 0%,#4ed390 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #55e88d 0%,#4ed390 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #55e88d 0%,#4ed390 100%); /* IE10+ */
background: linear-gradient(135deg, #55e88d 0%,#4ed390 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55e88d', endColorstr='#4ed390',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.block.vine .sn { color: #fff; }
.block.vine .icon { width: 27px; height: 30px; display: inline-block; background-image: url('../images/vine-icon.png'); }
/*
* Tips and Tools
*/
.platform-ios .button-android { display:none; }
.platform-android .button-ios { display:none; }
.hero-tips { padding-top: 90px; padding-bottom: 60px; min-height: 465px; }
.hero-tips h2 { font: 45px "OmnesATT Bold Italic"; line-height: 38px; margin: 0; color: #0A3B87;}
.starter-slide { max-width: 555px; margin: 0 auto; position: relative; }
.starter-slide .pick { text-align: center; width: 290px; margin-top: 30px; }
.hash-img { margin-left: 104px; position: absolute; width: 300px; top: -53px; left: 224px; }
.middle-phone { margin-top: 62px; margin-bottom: 30px; width: 210px; }
#myCarousel { display: none; }
#droidCarousel { display: none; }
.carousel-control.right,
.carousel-control.left { background-image: none; }
.orng-header,
.orng-header-sub { font: 37px "OmnesATT Light Italic", sans-serif; color: #f67a00; }
.orng-header-sub { font: 28px "OmnesATT Regular Italic"; text-align: center;}
.middle-tips { background: #fff; }
.middle-tips .contents { padding-top: 15px; }
.middle-tips .orng-header { text-align: right; }
.middle-tips .store-badge { margin-left: 10px; }
.right-align { text-align: right; }
.middle-tips p, .tips-bottom p, .tips-vr p, .tips-simulator, .vr-wrapper .section-2
{ font: 17px "OmnesATT Medium Italic", sans-serif; line-height: 25px; }
.tips-bottom p, .vr-wrapper.section-2 { color: #1193bf; }
.tips-simulator p { color: #1193bf; }
.tips-vr p { color: #1193bf; }
.middle-tips p { color: #0A3B87; }
p.disclaimer-txt { font: 10px "OmnesATT Light Italic", sans-serif; cursor: pointer; }
.pick-phone { text-align: center; font: 22px "OmnesATT Medium Italic", sans-serif; text-transform: uppercase; color: #f67a00;}
.tips-bottom { background: #f6f6f6; padding-top: 90px; }
.btn.att-btn { background: #f67a00; border: none; color: #fff; text-shadow: none; font: 21px "OmnesATT Medium Italic"; padding: 4px 12px; }
.slide-phone { float: left; margin-left: 9%; }
.slide-header { font: 100px "OmnesATT Light Italic", sans-serif; }
.slide-copy { font: 24px "OmnesATT Medium Italic", sans-serif; line-height: 48px; }
.item { overflow: hidden; }
.info-sections.tips-page { padding-bottom: 100px; border-top: 1px solid #e3e3e3; background: #fff; }
.close-steps { position: absolute; top: 0; right: 0px;}
.carousel-control.right { right: 200px; }
.carousel-control { top: 77px; }
.step-text { display: inline-block; max-width: 530px; }
.step-text p { padding-left: 80px; }
.step-text h5 { margin-top: 0; }
.btn.att-btn.steps-btn { display: block; font: 24px "OmnesATT Regular Italic", sans-serif; margin: 25px 0; }
.ios-steps, .droid-steps { display: none; }
.droid-steps h3, .ios-steps h3 { font: 60px "OmnesATT Light Italic", sans-serif; color: #f67a00; }
.steps-section { position: relative; padding: 0 0 0 163px; text-align: left; }
.steps-section li { font: 20px "OmnesATT Medium Italic", sans-serif; padding-left: 31px; margin-bottom: 20px; color: #666;}
.steps-section.ios-steps li { margin-bottom: 48px; }
.steps-section span { font: 17px "OmnesATT Medium Italic", sans-serif; color: #f67a00; margin-right: 20px; margin-left: -33px; }
.bottom-phone { margin-top: -60px; margin-bottom: 30px; width: 210px; float: right; }
.bottom-vr-video { margin-top: 0px; margin-bottom: -0px; width: 300px; float: right; }
.bottom-simulator { margin-top: 20px; margin-bottom: 30px; width: 510px; float: right; }
.vr-wrapper .cardboard-image { margin-top: -60px; margin-bottom: 30px; width: 210px; float: right; }
.hero-tips .container,
.vr-wrapper .container,
.tips-wrapper .container,
.tips-simulator .container,
.tips-vr .container,
.tips-bottom .container { width: 875px; }
.tips-wrapper,
.tips-simulator,
.tips-wrapper .container { background: #cce4f0; }
.tips-vr .cardboard-image {width: 130%;float: left;position:relative;left:-80px;top:10px;}
.tips-vr .text {padding-left: 30px;}
.tips-vr h3 {paddint-top:0px; margin-top: 0px;}
.tips-vr .container { text-align:right;padding-top:90px;padding-bottom:90px;}
/* hack for weird overlay positioning */
/*.disclaimer.lightbox { margin: -866px auto 0; padding: 20px; border: 1px solid #cfcfcf;}*/
.tips-simulator {background:#fff;}
/*
* VR
*/
.vr-wrapper, .vr-wrapper p
{
font: 18px "OmnesATTII Medium Italic", "Lucida Grande", Helvetica, Arial, sans-serif !important;
line-height: 25px;
}
.vr-wrapper.section-1 h3
{
font: 55pt "OmnesATTII Medium Italic", "Lucida Grande", Helvetica, Arial, sans-serif !important;
color:#fff;
}
.vr-eula, .vr-eula a
{
padding-top:20px;
text-align:center;
font: 10pt "OmnesATTII Regular", "Lucida Grande", Helvetica, Arial, sans-serif !important;
color:white;
}
.vr-eula a:hover
{
text-decoration:none;
}
.vr-wrapper .btn.att-btn, .vr-wrapper .orng-header {
font-family: "OmnesATTII Regular Italic", "Lucida Grande", Helvetica, Arial, sans-serif !important;
}
.vr-wrapper.section-1 {
padding-top: 60px;
text-align:center;
color: #fff;
font: 17px "OmnesATTII Medium Regular", sans-serif;
background-image: url(../images/vr-page-bgr.png);
background-size: cover;
background-repeat: no-repeat;
background-color: #f6f6f6;
background-position: center center;
padding-bottom: 95px;
height:670px;
max-height:670px;
}
.vr-wrapper.section-1 p {
padding-left:80px;
padding-right:80px;
padding-bottom:30px;
font: 19px "OmnesATTII Medium", "Lucida Grande", Helvetica, Arial, sans-serif !important;
}
.vr-wrapper.section-1 p.you-tube {
padding-top:0px;
padding-bottom: 10px;
}
.vr-wrapper.section-1 img.you-tube-button {
width:160px;
}
.vr-wrapper.section-1 p.app-stores {
padding-bottom: 10px;
padding-top:30px;
}
.vr-wrapper.section-2 {
color: #1193bf;
max-height: 407px;
height: 407px;
padding-top: 0;
}
.vr-wrapper.section-2 .col-sm-3 {
padding-top: 90px;
}
.vr-wrapper.section-3 {
padding-top: 0px;
background: #cce4f0;
color: #1193bf;
height: 407px;
}
.vr-wrapper.section-3 .desktop .col-sm-3 {
padding-top: 70px;
width: 62%;
}
.vr-wrapper.section-3 .desktop .col-sm-2 {
width: 38%;
}
.vr-wrapper.section-4 {
padding-top: 0px;
background: #fff;
color: #1193bf;
padding-top: 0%;
height: 407px;
width: 100%;
}
.vr-wrapper.section-2 .container {
display: table;
height: 100%;
}
.vr-wrapper.section-2 .container .row {
display: table-cell;
vertical-align: middle;
}
.vr-wrapper.section-4 .container {
display: table;
height: 100%;
}
.vr-wrapper.section-4 .container .row {
display: table-cell;
vertical-align: middle;
padding-top: 52px;
}
.vr-wrapper.section-4 p {
width:90%;
}
.vr-wrapper .full-width
{
padding:0px;
margin-left: -20px;
margin-right: -20px;
}
.vr-wrapper .vr-download-section-buttons
{
text-align:center;
}
.vr-wrapper.section-2 p
{
width: 90%;
}
.vr-wrapper .cardboard-image
{
margin-top: 77px;
_margin-bottom: 30px;
width: 320px;
float: right;
}
.vr-wrapper .swirl-car-image {
margin-top: 0px;
margin-bottom: 0px;
width: 410px;
left: -100px;
position: relative;
}
/*
* Footer
*/
.footer-logo { width: 100px; float: left; margin-right: 40px; margin-top: -32px;}
.footer ul { overflow: hidden; margin-bottom: 0;}
.footer li { float: left; margin-right: 78px; font: 15px "OmnesATT Medium Italic", sans-serif; margin-top: 11px; }
.footer a { color: #fff; text-decoration: none; text-transform: uppercase; }
.pledge .take-pledge { font: 30px "OmnesATT Medium Italic"; padding: 60px; text-align: center; color: #fff; }
.pledge .take-pledge .pledge-counter { font: 76px "OmnesATT Medium Italic"; margin-bottom: -10px; }
.pledge .take-pledge button,
.contest-form button { font: 25px "OmnesATT Medium Italic"; background-color: #f67a00; color: #fff; border-radius: 5px; margin: 20px 0; border: none; padding: 10px 20px; text-transform: uppercase; text-decoration: none;}
.contest-form button:hover { background-color: #f67a00; color: #fff; }
.contest-form button { background-color: #431aa0; }
.pledge .take-pledge a.twitter { margin: 5px;background-color: #02aae3; padding: 0px 10px; text-decoration: none; line-height: 36px;}
.pledge .get-involved { padding: 0 20px; }
.pledge .get-involved .content { margin: 0 auto; }
.first_name_container,
.last_name_container { width: 50%; }
.dob_month_container,
.dob_day_container,
.dob_year_container { width: 33.3%; }
.after-promise { padding: 10%; }
.after-promise .share {padding-left:10%; padding-right:10%;}
.spredfast .fb-name { color: #006AAB; font: 20px "OmnesATT Medium", sans-serif; }
.ember-animated-container>.ember-view { background: #fff; } /* Fix flickering issue when transitioning views */
.spredfast .row .left,
.spredfast .row .right { padding: 0; }
/*//////////////////////////////////////////////////////////////
// Mother's Day Re-skin (/takethepledge)
///////////////////////////////////////////////////////////////*/
.pledge.mothers .hero-pledge {
padding:0;
background: #093483;
background: -moz-linear-gradient(left, #093483 0%, #057ab5 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#093483), color-stop(100%,#057ab5));
background: -webkit-linear-gradient(left, #093483 0%,#057ab5 100%);
background: -o-linear-gradient(left, #093483 0%,#057ab5 100%);
background: -ms-linear-gradient(left, #093483 0%,#057ab5 100%);
background: linear-gradient(to right, #093483 0%,#057ab5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#093483', endColorstr='#057ab5',GradientType=1 );
}
.pledge.mothers .before-promise .pledge-image { width:100%; max-width:885px; margin-bottom: -280px;}
@media(max-width:800px){.pledge.mothers .before-promise .pledge-image { margin-bottom: -240px;}}
@media(max-width:700px){.pledge.mothers .before-promise .pledge-image { margin-bottom: -200px;}}
@media(max-width:768px){.pledge.mothers .before-promise .pledge-image { margin-bottom: -180px;}}
@media(max-width:667px){.pledge.mothers .before-promise .pledge-image { margin-bottom: -150px;}}
@media(max-width:480px){.pledge.mothers .before-promise .pledge-image { margin-bottom: -100px;}}
.pledge.mothers .before-promise {padding-top:60px;}
.pledge.mothers .before-promise .line { width:100%; max-width:500px; height:2px; background:white; display: block; margin:0 auto 20px;}
.pledge.mothers .before-promise h2 { font-size:64px; font-family: "OmnesATT Regular Italic", sans-serif;}
.pledge.mothers .before-promise h3 { font-size:40px;}
@media(max-width:767px){.pledge.mothers .before-promise h3 { font-size:24px; }}
.pledge.mothers .before-promise p.pledge-copy {font-style:normal; font-family: "OmnesATT Light"; width: 100%; max-width: 860px; margin: 0 auto;}
@media(max-width:900px){.pledge.mothers .before-promise p.pledge-copy {font-size:18px;}}
@media(max-width:420px){.pledge.mothers .before-promise p.pledge-copy {font-size:17px;}}
@media(max-width:364px){.pledge.mothers .before-promise p.pledge-copy {font-size:18px;}}
.pledge.mothers .pledge-counter-holder {text-align: center; height:96px; width:100%; max-width:530px; padding-top:18px; margin:10px auto 0;}
@media(max-width:480px){.pledge.mothers .pledge-counter-holder {height:160px;}}
@media(max-width:480px){.pledge.mothers .pledge-counter-holder p.text {display: block;}}
.pledge.mothers .pledge-counter-holder p {display: inline-block; font-size:44px; vertical-align: middle; margin:0 5px;}
.pledge.mothers .pledge-counter-holder p.text {font-family:"OmnesATT Light Italic", sans-serif }
.pledge.mothers .take-pledge {height:auto;}
.pledge.mothers .content {height:auto; width:100%;}
.pledge.mothers .row {height:auto; width:100%; margin:0;}
.pledge.mothers .before-promise {height:auto;}
.pledge.mothers .after-promise { padding: 20px 0 0; }
.pledge.mothers .after-promise h3 { font-size:48px; margin-top:40px; margin-bottom:0px; font-family: "OmnesATT Light Italic", sans-serif }
.pledge.mothers .after-promise h2 { font-size:64px; margin:0; font-family: "OmnesATT Bold", "Calibri Bold", Arial, sans-serif}
@media(max-width:400px){.pledge.mothers .after-promise h2 { font-size:48px;}}
.pledge.mothers .after-promise .hash-line { font-size:18px; margin: 20px 0 0px; font-family: "OmnesATT Bold", sans-serif; padding: 0 15px; letter-spacing: 1px;}
.pledge.mothers .after-promise .hash-line-2 { font-size:18px; margin: 10px 0 70px; font-family: "OmnesATT Light", sans-serif; padding: 0 15px;}
.pledge.mothers .after-copy {display: block; position: relative;}
.pledge.mothers .memes { width:100%; max-width:1200px; text-align: center; margin:0 auto; font-size:0;}
@media(max-width:736px){.pledge.mothers .memes { padding:4px;}}
.pledge.mothers .meme {background-size: cover; width:100%; max-width:360px; height:182px; display: inline-block; -webkit-box-shadow: 0px 0px 25px 2px rgba(0,0,0,0.5);-moz-box-shadow: 0px 0px 25px 2px rgba(0,0,0,0.5);box-shadow: 0px 0px 25px 2px rgba(0,0,0,0.5); overflow:hidden; position:relative; border:solid 2px white; border-radius:2px; font-size:1rem; margin:4px; top:0; left:0;}
@media(max-width:480px){.pledge.mothers .meme {margin: 4px 0; width:300px; height: 152px;}}
.pledge.mothers .meme-overlay { width:100%; height:100%; position: absolute; top:100%; left:0; background:rgba(252,123,0,0.95); transform:translate(0,0); transition:transform .5s; padding:40px 10px;font-size:18px; }
@media(max-width:480px){.pledge.mothers .meme-overlay { padding:20px 10px; }}
.pledge.mothers .meme.hover .meme-overlay{ transform:translate(0,-100%); transition:transform .5s;}
.pledge.mothers .meme-overlay .line { width:100%; max-width:286px; height:2px; background:white; display: block; margin:15px auto}
.pledge.mothers .meme-overlay .fb-share { width:44px; height:44px; display:inline-block; background-position: center center; background-image:url(/images/mothers/fb_icon.png); background-size:100%; margin:5px; background-repeat: no-repeat; cursor:pointer;}
.pledge.mothers .meme-overlay .tw-share { width:44px; height:44px; display:inline-block; background-position: center center; background-image:url(/images/mothers/tw_icon.png); background-size:100%; margin:5px; background-repeat: no-repeat; cursor:pointer;}
.pledge.mothers .meme-overlay .pt-share { width:44px; height:44px; display:inline-block; background-position: center center; background-image:url(/images/mothers/pt_icon.png); background-size:100%; margin:5px; background-repeat: no-repeat; cursor:pointer;}
.pledge.mothers .meme-overlay .dl-share { width:44px; height:44px; display:inline-block; background-position: center center; background-image:url(/images/mothers/dl_icon.png); background-size:80%; margin:5px; background-repeat: no-repeat; cursor:pointer;}
.pledge.mothers .bottom-share { text-align: right; width:100%; max-width:1104px; margin: 50px auto;}
@media(max-width:1104px){.pledge.mothers .bottom-share { text-align: right; width:100%; max-width:736px; margin: 50px auto;}}
@media(max-width:736px){.pledge.mothers .bottom-share { text-align: right; width:100%; max-width:360px; margin: 50px auto;}}
.pledge.mothers .bottom-share a, .pledge.mothers .bottom-share p {display: inline-block; vertical-align: middle;}
.pledge.mothers .bottom-share p {font-size:16px; margin-right:10px; padding-top:6px;}
.pledge.mothers .after-promise .hero-bg {width:100%; height:500px; background:url(/images/fathers/hero-background.jpg); background-size:cover;}
.pledge.mothers .hero-bg { position: absolute; top:0; left:0;}
.pledge.mothers .after-promise .promise-action {padding:5px 8px; font-size:14px; line-height:20px; border-radius:8px; margin-left:20px;}
.pledge.mothers .after-promise .promise-action img {height:26px;}
@media(max-width:736px){.pledge.mothers .after-promise .promise-action{ margin-left:0; margin-right:0;}}
.pledge.mothers .before-promise .pledge-direction {font-style: normal; font-family: "OmnesATT Light"; width: 100%; max-width: 650px; margin: 10px auto 0px; font-size:20px;}
@media(max-width:767px){.pledge.mothers .before-promise .pledge-direction {font-size:14px;}}
.pledge.mothers .infographic { width:100%; max-width:1000px; margin:00px auto 20px; z-index:99; display: block; position: relative;}
.pledge.mothers .infographic img { display: inline-block; vertical-align: bottom; margin-top:-50px;}
.pledge.mothers .infographic img.md_banner { display: block; width:300px; margin:0 auto;}
.pledge.mothers .infographic .step { width:100px;}
.pledge.mothers .infographic .plus { width:30px; margin-bottom:20px}
.pledge.mothers .infographic .equals { width:30px; margin-bottom:20px}
@media(max-width:736px){.pledge.mothers .infographic {text-align:center; display: block; margin:-20px auto 20px; padding-left:0px; max-width:320px; width:100%;}}
@media(max-width:736px){.pledge.mothers .infographic img.md_banner {width:100%;}}
@media(max-width:736px){.pledge.mothers .infographic img {display:block; margin:3px auto;} }
@media(max-width:736px){.pledge.mothers .infographic .step {width:140px;margin-bottom:8px;}}
@media(max-width:736px){.pledge.mothers .infographic .plus {width:40px; margin-bottom:10px;}}
@media(max-width:736px){.pledge.mothers .infographic .equals {width:40px; margin-bottom:10px;}}
@media(max-width:736px){.pledge.mothers .after-promise h3 {margin-top:80px;}}
/*////////////////////////////////////////////////////////////////////////////////
// Pledge
////////////////////////////////////////////////////////////////////////////////*/
.pledge .hero-pledge { background: url('../images/pledge-hero-bg.jpg') no-repeat; background-size: cover; min-height: 770px; background-position: center top; }
.get-involved .orng-header { text-align: center; text-transform: uppercase; font-family: "OmnesATT Medium Italic", sans-serif }
.get-involved p { font: 18px "OmnesATT Regular Italic"; line-height: 30px; text-align: center; color: #8e8e8e; margin-bottom: 70px; }
.get-involved .toolkit-download a { background-color: #f67a00; color: #FFF; border-radius: 4px; padding: 15px; font: 16px "OmnesATT Medium Italic"; text-decoration: none;}
.get-involved .toolkit-download { margin-bottom: 10px;}
#nextLevelGotoDesktopSite .toolkit-download a { background-color: #26a1d5; cursor:pointer;color: #FFF; border-radius: 4px; padding: 15px; font: 20px "OmnesATT Medium Italic"; text-decoration: none;}
.pledge .get-involved,.pledge.get-involved{ background-color:#fff;}
.pledge form label,
.contest form label { color: #076BA9; font: 13px "OmnesATT Regular Italic"; text-align:left; width:100%;}
.info-sections { background: #f6f6f6; border-bottom: 1px solid #e3e3e3; }
.info-sections .orng-header { text-transform: uppercase; font: 36px "OmnesATT Medium Italic", sans-serif; padding-left: 10px; text-align: left;}
.info-sections p,
.info-sections a { padding-left: 10px; text-align: left;font: 24px "OmnesATT Regular Italic"; line-height: 40px; color: #8e8e8e; cursor: pointer;}
.info-sections-detail a { font: 24px "OmnesATT Medium Italic";}
a.btn.facebook { background: #44609f; border-radius: 4px; border: 1px solid #6980b2; font: 28px "OmnesATT Medium Italic", sans-serif; padding: 0 10px; color: #fff; line-height: 36px; }
a.btn.facebook span,
.btn.twitter span { top: 2px; position: relative; }
a.btn.facebook img { border-left: 1px solid #6980b2; margin-left: 12px; }
.btn.twitter { background: #02aae3; border-radius: 4px; border: 1px solid #35bbe9; font: 28px "OmnesATT Medium Italic", sans-serif; padding: 0 10px; color: #fff; line-height: 36px; }
.btn.twitter img { border-left: 1px solid #35bbe9; margin-left: 12px; }
.btn.instagram-share { background: #326288; border-radius: 4px; border: 1px solid #35bbe9; font: 36px "OmnesATT Medium Italic", sans-serif; padding: 0 10px; color: #fff; line-height: 36px; }
.btn.instagram-share img { border-left: 1px solid #35bbe9; margin-left: 12px; }
.width-25-percent { width: 24%; display: inline-block; }
.width-25-percent img { display: block; margin: 0 auto; }
#champion-logos { display: none; }
.champions-img { width:100%;}
.movement .text-below-pledge {font-size: 100%;
line-height: 150%;
padding-top: 20px;}
/*////////////////////////////////////////////////////////////////////////////////
// Contest
////////////////////////////////////////////////////////////////////////////////*/
.contest { background-color: #fff; }
.step1, .step2, .step3 { padding-bottom: 75px !important; }
.contest-form label { color: #066BA9; font: 18px "OmnesATT Medium Italic", sans-serif; }
.contest-form .center { max-width: 530px; margin: 30px auto; position: relative; float: none; }
.contest-form .center .row { margin: 0 -15px; }
.contest-form p { line-height: 28px; }
.contest-form textarea { padding: 20px 20px 30px; }
.contest-form h3 { color: #981aa0; }
.contest-form .fineprint p { line-height: 26px; font: 10px "OmnesATT Medium Italic", sans-serif; margin-bottom: 20px; }
.contest-form .step2 .center { text-align: center; }
.contest-form .step2 .form-group { text-align: left; }
.contest-form .btn.twitter,
.contest-form .btn.facebook,
.contest-form .btn.instagram-share { font: 23px "OmnesATT Medium Italic", sans-serif; margin-bottom: 20px; }
.card.contest { height: 210px;
background: #e8e8e8; /* Old browsers */
background: -moz-linear-gradient(45deg, rgba(234,234,234,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(234,234,234,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, rgba(234,234,234,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, rgba(234,234,234,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, rgba(234,234,234,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(45deg, rgba(234,234,234,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.card.contest { color: #981aa0; text-align: left; }
.card.contest p { font: 16px "OmnesATT Medium Italic"; }
.card.contest .entersweeps { color: #f67a00; font: 16px "OmnesATT Medium Italic"; }
.card.contest .center-vertical { width: 45%; top: -37px; }
.card.contest .mic-image { position: relative; top: 10px; margin-left: -90px; }
.card.contest .demi-title { font: 22px "OmnesATT Medium Italic"; margin: 0; }
.card.contest .demi-name { font: 55px "OmnesATT Medium Italic"; margin-top: 5px; line-height: 40px; }
.card.contest button { background-color: #431aa0; color: #fff; padding: 10px 20px; margin-left: 0; margin-bottom: 0; margin-right: 0; cursor: pointer; }
.card.contest button:hover { background: #981aa0; }
#submit-signup:hover,
#submit-signup:active,
#submit-sweeps:hover,
#sweeps-step1:hover,
#sweeps-step1:active,
.card.contest button:active { color: #fff; background: #981aa0; }
.arrow { width: 0; height: 0; position: absolute; display: block; top: 0; left: 50%; margin-left: -30px; box-sizing: border-box; }
.card.pledge .arrow { border-left: 25px solid transparent; border-right: 25px solid transparent; border-top: 25px solid #E8E8E8; }
.card.contest .arrow { border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 25px solid #F6F6F6; top: -25px; }
.spredfast .arrow { border-left: 25px solid transparent; border-right: 25px solid transparent; border-top: 25px solid #fff; top: -1px; z-index: 10; }
.spredfast .arrow.shadow { border-top: 26px solid #e3e3e3; top: 0px; z-index: 10; }
.contest .hero {
background: rgb(152,26,160); /* Old browsers */
background-image: url('../images/demi.jpg'), -moz-linear-gradient(left, rgba(152,26,160,1) 0%, rgba(152,26,160,1) 49%, rgba(67,26,160,1) 51%, rgba(67,26,160,1) 100%); /* FF3.6+ */
background-image: url('../images/demi.jpg'), -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(152,26,160,1)), color-stop(49%,rgba(152,26,160,1)), color-stop(51%,rgba(67,26,160,1)), color-stop(100%,rgba(67,26,160,1))); /* Chrome,Safari4+ */
background-image: url('../images/demi.jpg'), -webkit-linear-gradient(left, rgba(152,26,160,1) 0%,rgba(152,26,160,1) 49%,rgba(67,26,160,1) 51%,rgba(67,26,160,1) 100%); /* Chrome10+,Safari5.1+ */
background-image: url('../images/demi.jpg'), -o-linear-gradient(left, rgba(152,26,160,1) 0%,rgba(152,26,160,1) 49%,rgba(67,26,160,1) 51%,rgba(67,26,160,1) 100%); /* Opera 11.10+ */
background-image: url('../images/demi.jpg'), -ms-linear-gradient(left, rgba(152,26,160,1) 0%,rgba(152,26,160,1) 49%,rgba(67,26,160,1) 51%,rgba(67,26,160,1) 100%); /* IE10+ */
background-image: url('../images/demi.jpg'), linear-gradient(to right, rgba(152,26,160,1) 0%,rgba(152,26,160,1) 49%,rgba(67,26,160,1) 51%,rgba(67,26,160,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#981aa0', endColorstr='#431aa0',GradientType=1 ), progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/demi.jpg"); /* IE6-9 */
background-repeat: no-repeat;
background-position: center center;
}
.contest .hero { height: 540px; }
.contest .hero .copy { text-align: right; top: 115px; right: 50px; width: 445px; position: relative; float: right; }
.contest .demi-title { font: 48px "OmnesATT Medium Italic"; line-height: 1em; margin: 10px 0; }
.contest .hero p { font: 20px "OmnesATT Regular Italic"; }
.demi-logo-large { background: url('../images/demi_logo_large.png') no-repeat 0 0; top: 8px; position: relative; width: 34px; height: 54px; display: inline-block; }
.demi-logo.medium { display: inline-block; width: 20px; height: 33px; margin-right: 5px; }
.demi-logo.medium.blue { background-image: url('../images/demi_logo_medium_blue.png'); }
#homeTakePledgeButton:hover .demi-logo.small,
.demi-logo.small { background: url('../images/demi_logo_small_purple.png') no-repeat 0 0; width: 10px; height: 17px; display: inline-block; top: 2px; margin-right: 5px; position: relative; }
#homeTakePledgeButton:hover .demi-logo.small { background: url('../images/demi_logo_small_orange.png') no-repeat 0 0; top: 0px; }
#homeTakePledgeButton .demi-logo.small { top: 0; }
.card.contest .demi-logo.small.orange { background: url('../images/demi_logo_small_orange.png') no-repeat 0 0; top: 2px; margin-right: 2px; }
#entersweeps .demi-logo.small,
.active .demi-logo.small,
#contestLink:hover .demi-logo.small,
#homeTakePledgeButton .demi-logo.small { background-image: url('../images/demi_logo_small.png'); }
#entersweeps .demi-logo.small { top: 0; }
.gears-icon { background: url('../images/gears-blue.png') no-repeat 0 0; width: 14px; height: 15px; display: inline-block; top: 1px; margin-right: 2px; position: relative; }
#gifGeneratorLink a { color: #006699; }
#gifGeneratorLink:hover a { color: #fff; }
#gifGeneratorLink:hover .gears-icon { background-image: url('../images/gears-white.png'); }
/*////////////////////////////////////////////////////////////////////////////////
// Movement
////////////////////////////////////////////////////////////////////////////////*/
.movement { font: 40px "OmnesATT Regular Italic"; color: #26a1d5; line-height: 40px; }
.movement .animated { -webkit-animation-duration:1s; animation-duration:1s; }
.movement .quote.animated { -webkit-animation-duration:1s; animation-duration:1s; }
.movement .figures span.animated { -webkit-animation-duration:.5s; animation-duration:.5s; }
.movement .mobiles span.animated { -webkit-animation-duration:.5s; animation-duration:.5s; }
.movement img {
width: 85%;
}
.movement .state .text,
.movement .bubble.blue.animated { -webkit-animation-duration:2s; animation-duration:2s; }
.movement .bubble.red.animated { -webkit-animation-duration:4s; animation-duration:4s; }
.movement .bubble { font: 19px "OmnesATT Light Italic"; line-height: 28px; padding: 25px 20px; display: inline-block; color: #fff; position: relative; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; }
.bubble.light-blue { width: 245px; height: 245px; background-color: #ef8f28; width: 100%;height: 100%;/* background-color: #ef8f28; */ padding: 0;}
.bubble.orange { width: 245px; height: 245px; background-color: #ef8f28; }
.bubble.red { width: 245px; height: 245px; background-color: #ec0052; top: 130px; }
.bubble.blue { width: 310px; height: 310px; background-color: rgba(42,140,192,.8); z-index: 100 !important; padding: 15px; margin: 0 -35px 0 -35px; top: 45px; font: 30px "OmnesATT Light Italic"; }
.texters { font: 200px "OmnesATT Light Italic"; vertical-align: middle; }
.less-texters { font: 37px "OmnesATT Medium Italic"; display: inline-block; vertical-align: middle; width: 315px; }
.bubble p span { display: block; font: 80px "OmnesATT Light Italic"; line-height: 85px; }
.reason { width: 500px; margin-top: 120px; position: relative; }
.figures span { width: 51px; height: 150px; margin: 0 5px -25px 0; background-color: #ef8f28; display: inline-block; }
.figures span.pinkman { background: url('../images/pinkman.png') no-repeat 0 0; }
.figures span.yellowman { background: url('../images/yellowman.png') no-repeat 0 0; }
.mobiles span { width: 20%; padding:20px;margin: 0 5px -25px 0; background-color: transparent; display: table-cell; }
._mobiles span.movement-mobile-1 { background: url('../images/movement-phone-1.png') no-repeat 0 0; }
._mobiles span.movement-mobile-2 { background: url('../images/movement-phone-2.png') no-repeat 0 0; }
._mobiles span.movement-mobile-3 { background: url('../images/movement-phone-3.png') no-repeat 0 0; }
._mobiles span.movement-mobile-4 { background: url('../images/movement-phone-4.png') no-repeat 0 0; }
.mobiles span.phone-icon {background-size:100%}
.text-nearly-4-in-10 {font: 70px "OmnesATT Light Italic"; ; color:#0c2577;}
.text-social-network-while-driving {font: 35px "OmnesATT Light Italic"; color:#808080;border-bottom: 1px solid #808080; display: inline;}
.text-nearly-half {font: 70px "OmnesATT Light Italic"; ; color:#067ab4; }
.text-of-commuters {font: 35px "OmnesATT Light Italic"; color:#808080;border-bottom: 1px solid #808080; display: inline;}
.underline-border {border-bottom: 1px solid; display: inline;}
.bubble-row {padding-bottom:20px; padding-top:20px;}
.movement-orange {color:#ff7200;}
.movement-gray {color:#808080;}
.movement-blue {color:#067ab4;}
.movement-green {color:#6ebb1f;}
.movement-purple {color:#fa00a1;}
.text-movement-header {font: 90px "OmnesATT Light Italic";line-height:80px;}
.text-movement-content {font: 40px "OmnesATT Light Italic";}
.textperate { }
.textperate .col-sm-2 { width: 40%; padding: 0;}
.textperate .col-sm-2.copy { width: 52%; }
.textperate .copy { margin-top: 30px; }
.col-sm-2-half {width:50%; float: left; position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;}
.col-sm-2-25 {width:45%; float: left; position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;}
.col-sm-2-75 {width:55%; float: left; position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;}
.module .fraction { font: 70px "OmnesATT Medium Italic"; float: left; display: inline-block; line-height: 30px; }
.module.textperate .copy .text { display: inline-block; color: #999; width: 295px; font: 24px "OmnesATT Regular Italic"; line-height: 30px; margin-left: 14px; margin-top: 20px; }
.module .text { width: 520px; margin: 0 auto; }
.module .quote { background-color: #ff1763; color: #fff; padding: 20px 30px; width: 375px; border-radius: 15px; margin-top: 15px; position: relative; }
.module .quote p { font: 50px "OmnesATT Light Italic"; line-height: 45px; }
.movement .quote .arrow { border-left: 0px; border-top: 30px solid transparent; border-right: 50px solid #ff1763; left: -35px; top: 50%; margin-left: 0px; margin-top: -30px; box-sizing: border-box; border-bottom: 30px solid transparent; }
.module.state { margin-top: 90px; margin-bottom: 30px; }
.module.state .text { top: 80px; position: relative; font: 40px "OmnesATT Regular Italic"; line-height: 40px; }
.module.pledge-count { font-size: 36px; }
.module.pledge-count .pledge-counter { font: 130px "OmnesATT Regular Italic"; color: #f63581; margin-bottom: -20px; }
.movement #take-pledge { font: 52px "OmnesATT Medium Italic"; background-color: #f67a00; color: #fff; border-radius: 5px; margin: 50px 0 0; border: none; padding: 10px 30px; text-transform: uppercase; }
.module.get-the-word-out .top-copy { font: 22px "OmnesATT Medium Italic"; }
.bubble.blue .top-copy { font: 30px "OmnesATT Medium Italic"; }
.module.mobile-devices {padding-top:30px;}
.movement .boy-vs-girl { min-height: 410px; }
.movement .boy-vs-girl b { font: 38px "OmnesATT Medium Italic"; line-height: 30px; }
.movement .boy-vs-girl .text { width: 50%; text-align: right; line-height: 40px; top: 117px; font: 38px "OmnesATT Regular Italic"; }
.movement .boy-vs-girl .vs { position: absolute; top: 170px; left: 120px; font: 40px "OmnesATT Bold Italic"; color: #45D0E1; }
.movement .boy-vs-girl .vs.nudge { left: 143px; }
.movement .boy-vs-girl .boys,
.movement .boy-vs-girl .girls { display: inline-block; vertical-align: bottom; width: 120px; height: 244px; }
.movement .boy-vs-girl .boys { background: url('../images/figure-boy-small.png') no-repeat 0 0; position: absolute; left: 185px; top: 49px; }
.movement .boy-vs-girl .girls { background: url('../images/figure-girl-small.png') no-repeat 0 0; position: absolute; top: 49px; left: 0; }
.movement .boy-vs-girl .boys.leader { width: 142px; height: 293px; top: 20px; left: 160px; background: url('../images/figure-boy-large.png') no-repeat 0 0; }
.movement .boy-vs-girl .girls.leader { width: 142px; height: 293px; top: 25px; background: url('../images/figure-girl-large.png') no-repeat 0 0; }
#word-cloud { margin: 20px auto; width: 650px; height: 500px; }
.word-cloud-header .text { width: 460px; margin: 0 0 30px; }
.movement .listening-people { text-align: center; width: 90%; margin: 100px auto 130px; }
.movement .listening-people .twitter-handle { background: url('../images/twitter-icon-large-blue.png') no-repeat center top; padding: 55px 0 0; margin-top: 25px; }
.movement .listening-people .cfooter { font: 30px "OmnesATT Regular Italic"; color: #999; }
.movement .listening-people .stats { margin-top: 40px; }
.movement .listening-people .stats > span { font: 36px "OmnesATT Medium Italic"; line-height: 26px; padding: 58px 0; width: 200px; height: 200px; display: inline-block; border: 15px solid #40d0df; border-radius: 100%; text-align: center; vertical-align: middle; }
.movement .listening-people .stats > span.favorites { border: 15px solid #ff3600; }
.movement .listening-people .stats > span.retweets { border: 15px solid #fd0654; }
.movement .listening-people .stats > span .body { font: 26px "OmnesATT Regular Italic"; }
.movement .module div { z-index: 2; }
.movement div.mobiles { text-align: center;padding-bottom:40px;}
.movement img.bubble-image {width:80%;}
.arrow-1 {
width: 50%;
margin: 0 auto;
position: relative;
z-index: 1 !important;
}
.arrow-2 {
width: 50%;
margin: 0 auto;
position: relative;
z-index: 1 !important;
/* right: 220px; */
}
.arrow-b { width: 148px; height: 89px; position: absolute; z-index: 1 !important; top: 356px; right: 125px; background: url('../images/arrow-dotted-b.png') no-repeat 0 0; }
.arrow-c { width: 17px; height: 90px; position: absolute; z-index: 1 !important; top: 375px; left: 365px; background: url('../images/arrow-dotted-c.png') no-repeat 0 0; }
.state .arrow-c { left: 250px; top: 290px; }
.listening-people .arrow-a { right: 130px; top: 550px; }
.boy-vs-girl .arrow-c { top: 325px; right: 232px; }
.word-cloud .arrow-c { top: 530px; right: 232px; }
.movement .fineprint p { line-height: 30%; font: 16px "OmnesATT Medium Italic", sans-serif; margin: 100px 0; }
/*.module.word-cloud-header .text { width: 520px; margin: 0 0 0 45px; }*/
/*////////////////////////////////////////////////////////////////////////////////
// Videos
////////////////////////////////////////////////////////////////////////////////*/
/*.spredfast .videos .masonry-grid { margin: 0 -2%; }*/
.spredfast .videos { margin-bottom: 60px; }
.spredfast .videos .block { margin: 2%; max-height: 240px; height: 240px; }
.spredfast .videos .block:nth-child(odd) { margin-left: 8%; }
.spredfast .videos .block:nth-child(even) { margin-right: 8%; }
/*////////////////////////////////////////////////////////////////////////////////
// Spread the word
////////////////////////////////////////////////////////////////////////////////*/
.spread-the-word { background: #fff; }
.spread-the-word .content { margin: 0 auto; padding: 100px 15px; line-height: 150%; max-width: 600px; font: 18px "OmnesATT Regular Italic"; }
/*////////////////////////////////////////////////////////////////////////////////
// Lightbox
////////////////////////////////////////////////////////////////////////////////*/
.info .social { padding: 10px 0; border-top: 1px solid #ccc; }
.youtube .info .social { border: none; }
.lightbox .profile-image { margin-right: 10px; border: 1px solid #ccc; }
.lightbox .profile-image img { width: 100%; position: relative; }
.valign-middle { text-align: center; }
.valign-middle:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: 0; }
.center-vertical { width: 90%; vertical-align: middle; display: inline-block; position: relative; z-index: 200; }
.lb-bg { width: 100%; height: 100%; display: none; position: fixed; top: 0; left: 0; background: rgba(255,255,255,.85); z-index: 10000; }
.lightbox { text-align: left; background: #fff; display: none; width: 90%; margin: 0 auto; overflow: hidden; max-width: 640px; position: relative; z-index: 10001; }
.lightbox section { display: none; overflow: hidden; }
.lightbox .content-text { font: 14px "OmnesATT Regular Italic"; margin: 20px 0; }
.lightbox .sn,
.lightbox .publishTime,
.lightbox .share,
.lightbox .social .fav { font: 14px "OmnesATT Medium Italic"; }
.lightbox .social .fav { color: #999; }
.lightbox .social .fav:hover { color: #24c8ff; }
.lightbox .social .count { font: 16px "OmnesATT Medium"; color: #999999; }
.lightbox .name { font: 20px "OmnesATT Medium Italic"; color: #24c8ff; margin-right: 5px; }
.lightbox.twitter .name { color: #24c8ff; }
.lightbox.instagram .name { color: #326288; }
.lightbox.vine .name { color: #00b488; }
.lightbox.youtube .name { color: #cc0000; }
.lightbox.twitter .sn,
.lightbox.twitter .social .count { padding: 5px 0; }
.lightbox.twitter .icon { padding: 10px 15px; display: inline-block; cursor: pointer; vertical-align: middle; }
.lightbox.twitter .icon span { display: block; background: url('../images/tweet-re-icons.png') no-repeat; }
.lightbox.twitter .icon.reply { margin-left: -15px; }
.lightbox.twitter .reply span { width: 17px; height: 13px; }
.lightbox.twitter .retweet span { width: 20px; height: 13px; background-position: -17px 0; }
.lightbox.twitter .reply:hover span { background-position: 0 -13px; }
.lightbox.twitter .retweet:hover span { background-position: -17px -13px; }
.lightbox.instagram { height: auto; border: 1px solid #326288; }
.lightbox .instagram > img { width: 100%; }
.lightbox.instagram .profile-image { border: 1px solid #326288; }
.lightbox.twitter,
.lightbox.twitter .profile-image { border: 1px solid #24c8ff; }
.lightbox.youtube,
.lightbox.youtube .profile-image { border: 1px solid #cc0000; }
.lightbox.vine,
.lightbox.vine .profile-image { border: 1px solid #00b488; }
.lightbox .info { padding: 20px; }
.lightbox.twitter .info { padding: 30px 30px 10px; }
.lightbox .close { width: 32px; height: 32px; background-image: url('../images/close-icon.png'); }
.lightbox .terms,
.lightbox .sweepstakes-terms,
.lightbox .disclaimer { padding: 30px; border: 1px solid #18c5ff; overflow-y: scroll; height:434px;}
.lightbox .share { padding: 10px 0 0; color: #999999; }
.lightbox .share span { vertical-align: middle; margin-right: 10px; }
.lightbox .share .facebook { width: 31px; height: 30px; cursor: pointer; display: inline-block; background-image: url('../images/facebook-share-icon.png'); }
.lightbox .share .tweet { width: 31px; height: 30px; cursor: pointer; display: inline-block; background-image: url('../images/twitter-share-icon.png'); }
/* GRID OVERRIDES (Mainly for home page aggregated content section) */
.static-grid .att.plchldr { background-color: #18c5ff; }
.container,
.top-container { padding: 0; }
.top-container { margin-top: 50px; }
.row { margin: 0; }
.pledge .row { margin-left: -15px; margin-right: -15px; }
.spredfast .right .col-sm-1,
.get-involved .col-sm-2 { width: 50%; }
.home .col-sm-3,
.home .col-sm-2,
.home .col-sm-4,
.home .col-sm-5,
.home .col-md-5,
.spredfast .col-sm-5 { padding: 0; }
/* Main Columns */
.home > col-sm-3 { width: 60%; }
.home > col-sm-2 { width: 40%; }
/* Internal Wide Columns */
.card.col-sm-3,
.block.col-sm-3 { width: 66.666666666%; }
/* Internal Thin Columns */
.card.col-sm-2,
.block.col-sm-3 { width: 33.333333333%; }
.masonry-grid .block.col-sm-1 { width: 20%; }
.masonry-grid .block.col-sm-2 { width: 40%; }
p.terms { display: none; }
.contest p.terms { display: inline-block; font: 18px "OmnesATT Medium Italic", sans-serif; float: left; }
.contest p.terms a { color: #f67a00; }
.contest .form-group.email { margin-bottom: 30px; }
#sweeps-step1 { padding: 2px 30px; margin: 0; float: right; top: -15px; position: relative; }
.filter-content-titles { font: 22px "OmnesATT Medium Italic"; padding: 40px 0 30px; }
.before-promise {
padding-top: 60px;
}
/*////////////////////////////////////////////////////////////////////////////////
// modes
////////////////////////////////////////////////////////////////////////////////*/
body .hide-static {
display: block;
}
body .show-static {
display: none;
}
body.static .hide-static {
display: none !important;
}
body.static .show-static {
display: block !important;
}
.contest-form iframe {
width: 500px;
}
.file-wrapper {
display: inline-block;
cursor: pointer;
overflow: hidden;
position: relative;
vertical-align: top;
float: left;
}
.file-wrapper input {
display: inline-block;
cursor: pointer;
font-size: 100px;
height: 100%;
filter: alpha(opacity=1);
opacity: 0.01;
position: absolute;
right: 0;
top: 0;
}
.btn.file-button {
display: inline-block;
float: left;
width: 120px;
height: 30px;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 14px;
padding: 0 10px;
text-align: center;
border-radius: 0px;
margin: 0;
vertical-align: top;
}
.btn.file-button img {
margin-left: 4px;
vertical-align: top;
}
.btn.file-button.upload-done {
background: #A4BA53;
cursor: not-allowed;
pointer-events: none;
}
.file-path {
display: inline-block;
overflow-x: hidden;
float: left;
border-top: 1px solid;
border-bottom: 1px solid;
font: 12px "OmnesATT Medium Italic";
width: 200px;
height: 30px;
vertical-align: top;
padding: 5px;
text-align: left;
width: 255px;
}
.upload-loader {
display: none;
width: 20px;
height: 20px;
}
.or {
margin-top: -50px;
}
.get-involved .toolkit-download a { display: inline-block; width: 45%; }
#toolkitLink.toolkit-download a { width: 27%; }
#toolkit.toolkit-download a { background-color: #f67a00; }
#mobileWallpaper.toolkit-download a { background-color: #7d277b; }
#videoLibrary.toolkit-download a { background-color: #9cba3f; }
#profilePicture.toolkit-download a { background-color: #26a1d5; }
#nextLevelGotoDesktopSite.toolkit-download a { background-color: #26a1d5;fomt-size:18px; }
.module-adjustment-1
{
top:-100px;left:50px; position:relative;
}
.module-adjustment-2
{
top:-150px; position:relative;
}
.module-adjustment-3
{
top:-150px;position:relative;
}
.module-adjustment-4
{
top:-100px;position:relative;
}
@media (max-width: 1180px)
{
.pledge .hero-pledge {
_max-height: 1000px;
_min-height: 1000px;
background-size: initial;
}
.card.keep-your-eyes-on-the-road p {
line-height: 35px;
font-size: 30px;
}
.card.keep-your-eyes-on-the-road tag {
line-height:27px;
font-size: 27px;
}
}
@media (max-width: 1080px)
{
.text-movement-header {font-size: 78px;line-height:70px;}
.text-movement-content {font-size: 35px;line-height:37px;}
.spredfast .filter { padding: 30px 10px; }
.module-adjustment-1
{
top:-70px;left:60px;
}
.module-adjustment-2
{
top:-100px;;
}
.module-adjustment-3
{
top:-50px;
}
.module-adjustment-4
{
top:-0px;
}
}
@media (min-width: 992px) {
.home.container { width: auto; max-width: 1200px; padding: 0; }
.spredfast .container { width: auto; max-width: 1200px; padding: 0; }
.card.keep-your-eyes-on-the-road img
{
width:auto;
height: 100%;
}
}
@media (max-width: 992px) {
.tips-vr .cardboard-image {
width: 100%;
/* float: left; */
}
.hero-tips .container,
.vr-wrapper .container,
.tips-wrapper .container,
.tips-vr .container,
.tips-bottom .container { width: auto; }
.pledge .get-involved { padding: 10px; }
.pledge .get-involved .content { width: 80%; margin: 0 auto; }
.pledge .get-involved .row > .col-sm-2 { width: 50%; }
.card.video { height:auto; }
.card.video iframe { height: 420px; }
.card.social,
.card.pledge,
.card.meme,
.card.before-you-drive { width: 100%; float: none; min-height: 225px; }
.card.social { width: 100%; min-height: 25px; }
.card.tips { height: auto; }
.card.meme.mobile {
height: 225px;
}
.card.before-you-drive { padding: 10px; height: auto; }
.card.before-you-drive img { width: 150px; margin-top: -20px; }
.card.before-you-drive p { padding: 0; font: 18px "OmnesATT Medium Italic"; }
.card .arrow { width: 0; height: 0; position: absolute; display: block; border-right: 0px; border-top: 30px solid #fff; border-left: 30px solid #ebebeb; top: 50%; left: 0; margin-left: 0px; margin-top: -30px; box-sizing: border-box; border-bottom: 30px solid #fff; }
.steps-section { padding: 0 40px 0 112px; }
.filter-content-titles span { display: none; color: #094f95; }
.card.keep-your-eyes-on-the-road img
{
width:100%;
height: auto;
}
.card.keep-your-eyes-on-the-road {
height:auto;
}
.tips-simulator
{
display:none;
}
.text-movement-header {font-size: 55px;line-height:55px;}
.text-movement-content {font-size: 25px;line-height:27px;}
.module-adjustment-1
{
top:-30px;left:10px;
}
.module-adjustment-2
{
top:-80px;;
}
.module-adjustment-3
{
top:-50px;
}
.module-adjustment-4
{
top:-0px;
}
}
@media (min-width: 768px) {
.spredfast .container { width: auto; max-width: 1200px; }
.spredfast .movement.container { width: auto; padding:0%;}
.spredfast .whats-hot.container { width: auto; max-width: 960px; }
.card.col-sm-3,
.block.col-sm-3 { width: 66.666666666%; }
.card.col-sm-2,
.block.col-sm-2 { width: 33.333333333%; }
.card.keep-your-eyes-on-the-road {
width: 100%;
float: none;
overflow: hidden;
padding:0px;
}
.card.pledge {
height: 210px;
text-align: center;
box-sizing: border-box;
letter-spacing: 2px;
font: 25px 'OmnesATT Bold Italic', sans-serif;
background: linear-gradient(45deg, rgb(9, 52, 131) 0%, rgb(5, 122, 181) 100%);
}
.home.container {
width: auto;
}
.card.keep-your-eyes-on-the-road p
{
top: 60%;
}
.card.keep-your-eyes-on-the-road .tag
{
}
}
@media (max-width: 768px){
.bottom-vr-video {
width: 300px;
float: right;
}
.card.keep-your-eyes-on-the-road p {
line-height: inherit;
font-size: 33px;
}
.card.keep-your-eyes-on-the-road .tag
{
font-size:27px;
}
.width-25-percent { width: 100%; }
.get-involved .toolkit-download { margin-bottom: 30px;}
.pledge .get-involved,
.contest .get-involved { padding: 10px; }
.get-involved .take-to-next-level { padding-top:0px;}
.pledge .get-involved .content { width: 80%; margin: 0 auto; }
.pledge .get-involved .row > .col-sm-2 { width: 50%; }
.card.meme.mobile {
height: auto;
}
.card.video iframe { height: 340px; }
.card.keep-your-eyes-on-the-road p { font-size: 22px;}
.card.keep-your-eyes-on-the-road .tag { font-size: 19px;}
.card.before-you-drive { padding: 10px; }
.card.before-you-drive img { width: 130px; margin-top: -20px; }
.card.before-you-drive p { padding: 10px 20px 0; font: 22px "OmnesATT Medium Italic"; line-height: 22px; }
.card .arrow { width: 0; height: 0; position: absolute; display: block; border-right: 0px; border-top: 25px solid #fff; border-left: 18px solid #ebebeb; top: 50%; left: 0; margin-left: 0px; margin-top: -30px; box-sizing: border-box; border-bottom: 25px solid #fff; }
.after-promise { padding: 10%; }
/* Masonry Overides for mobile */
section.spredfast .block { width: 100% !important; }
.block.instagram.thin img { left: 0; }
.spredfast .block.youtube { }
.card.social .title { font-size: 38px; line-height: 38px; }
.card.social .icons span { margin: 0; }
.hero .social { padding: 20px 22px; }
section.spredfast .block { padding: 20px; }
section.spredfast .block.youtube { padding:0; }
section.main-header { height: 75px; }
div.view { top: 75px; }
.orng-header,
.info-sections .orng-header { font-size: 35px; line-height: 35px; }
.get-involved p { font-size: 18px; line-height: 22px; }
.get-involved a#downloadResourcesLink
{
font-size: 18px;
line-height: 22px;
}
.get-involved .media-body { padding: 0; }
.lightbox .profile-image,
.lightbox .name { display: block; }
.before-promise { padding: 38px; padding-top:120px;}
.btn.att-btn { font-size: 17px; }
.tips-similator .btn.att-btn { width: 90%;}
.tips-vr .btn.att-btn { width: 90%;}
.main-header { left: 0; position: relative; transition: all 200ms ease-out; }
.main-header.open { left: -80%; }
.pledge .get-involved { margin-left: 0; margin-right: 0; }
.pledge .take-pledge button { padding: 2px 40px; }
.block.twitter.wide,
.block.twitter.thin,
.block.twitter.large { padding: 25px 10px; }
#sweeps-step1 {
float: none;
top: 0;
}
.card.pledge {
width: 100%;
float: none;
}
.card.keep-your-eyes-on-the-road {
width: 100%;
float: none;
height:auto;
padding:0px;
}
.card.keep-your-eyes-on-the-road p
{
top: 65%;
}
.card.keep-your-eyes-on-the-road img
{
width:100%;
height: auto;
}
.social-wide > div {
padding: 20px 0px;
}
.card.social p { line-height: 24px; margin-bottom: 0; margin-top: 10px; }
.card.contest .demi-name { font: 50px "OmnesATT Medium Italic"; line-height: 45px; }
.contest .hero { background-position: 150px center; }
.contest .hero .copy { text-align: left; top: 27px; left: 15px; width: 45%; position: relative; float: left; }
.contest .hero p { font: 18px "OmnesATT Regular Italic"; }
.btn.facebook span,
.btn.twitter span,
.btn.instagram-share span,
a.btn.facebook span { position: relative; top: 6px; }
.btn.facebook img { float: right; padding: 0 8px; }
.btn.twitter img { float: right; }
.btn.instagram-share img { float: right; padding: 0 12px; }
.tell-everyone .btn.twitter,
.social-wide .btn.twitter,
.social-wide .card.social a.btn.instagram-share { width: 100%; margin-left: 0; }
.social-wide .card.social a.btn.instagram-share img { padding: 0 6px; }
/*////////////////////////////////////////////////////////////////////////////////
// Videos
////////////////////////////////////////////////////////////////////////////////*/
.spredfast .videos,
.spredfast .videos .block,
.spredfast .videos .block:nth-child(odd),
.spredfast .videos .block:nth-child(even) { margin: 0; }
.textperate { }
.textperate .col-sm-2,
.textperate .col-sm-2.copy { width: 100%; }
.figures span { margin: 0 -5px -25px 0; }
.mobiles span { margin: 0 -5px -25px 0; }
.module .fraction { float: none; margin-left: 0; margin-top: 10px; line-height: 65px; }
.textperate .copy { margin-top: 20px; }
.module.textperate .copy .text { margin-left: 0; }
.module .quote { width: auto; margin-top: 25px; text-align: left; padding-left: 5px; padding-right: 5px; }
.movement .listening-people .stats > span { margin-bottom: 20px; }
.module.pledge-count .pledge-counter { font: 200% "OmnesATT Regular Italic"; }
.module.pledge-count .text { width: auto; font-size: 24px; line-height: 30px; margin-top: 20px; }
.movement #take-pledge { font: 25px "OmnesATT Medium Italic"; margin-top: 20px; }
.movement #take-pledge {width:80%; }
.block.whats-hot .source {
font: 56px "OmnesATT Light Italic";
line-height: 56px;
}
.masonry-grid .block.whats-hot.col-sm-2 { width: 100%; margin: 0; padding: 20px; }
.hero-tips .container,
.vr-wrapper .container,
.tips-wrapper .container,
.vr-wrapper.section-2,
.tips-bottom .container { width: auto; }
.vr-wrapper .cardboard-image { float: none; width: 210px; }
.bottom-phone { float: none; width: 310px; }
.bottom-vr-video { float: none; width: 210px; margin-bottom: 0px;
margin-top: 5px;}
.middle-phone { width: 210px; }
.spredfast .filter { padding: 0 3px; text-align: left; }
.get-involved .toolkit-download a { display: inline-block; width: 100%; }
.vr-wrapper .cardboard-image
{ top: -70px;
position: relative;
margin-top: 0px !important;
margin-bottom: -90px;
width: 210px;
float: none;
}
.col-md-3.full-width
{
padding-left:0;
padding-right:0;
}
.hero-tips .starter-slide .pick {
width: auto;
}
}
@media (max-width: 720px) {
.card.video iframe { height: 300px; }
.col-sm-2-half {width:100%; float: none; position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;}
}
@media (min-width: 640px) {
.large-movement-graph, .large-texting-shortcut
{
visibility:visible;
display: inherit;
}
.small-movement-graph, .small-texting-shortcut
{
visibility:hidden;
display: none;
}
}
@media (max-width: 640px) {
.movement img.bubble-image {
width: 75%;
}
.movement .fineprint p {
line-height: 26px;
font: 14px;
}
.mobiles span {
padding: 3px;
}
.large-movement-graph, .large-texting-shortcut
{
visibility:hidden;
display: none;
}
.small-movement-graph, .small-texting-shortcut
{
visibility:visible;
display: inherit;
}
.movement .col-sm-3
{
padding-top: 30px;
}
.movement .col-sm-2
{
padding-top: 30px;
}
.movement .col-sm-2-25
{
width:100%;
padding-top: 30px;
}
.movement .col-sm-2-75
{
width:100%;
padding-top: 30px;
}
.movement .arrows
{
}
.text-movement-header {font-size: 50px;line-height:45px;
text-align:center;}
.text-movement-content {font-size: 20px;line-height:22px;text-align:center;}
.arrow-1 {
width: 100%;
}
.arrow-2 {
width: 100%;
}
.arrows .text-movement-content
{
font-size:35px;
}
.module-adjustment-1, .module-adjustment-2, .module-adjustment-3, .module-adjustment-4{
top: 0px;
}
.movement div.mobiles {
padding-bottom: 0px;
}
.movement .fineprint p { line-height: 16px; font-size: 13px; }
.movement .text-below-pledge {font-size: 60%;
line-height: 100%;
padding-top: 25px;}
}
@media (max-width: 480px) {
.card.video iframe { max-height: 250px; height:200px; min-height:200px; }
.contest .hero { background-position: -25px center; }
.contest .hero .copy { text-align: left; top: 27px; left: 15px; width: 57%; position: relative; float: left; }
.contest .hero p { font: 18px "OmnesATT Regular Italic"; }
.contest .demi-title { font: 28px "OmnesATT Medium Italic"; }
.contest-form #submit-sweeps { font-size: 24px; }
.module .text {
width: 100%;
margin: auto;
}
.module.get-the-word-out { min-height: 800px; margin-top: 25px; }
.module .bubble.blue { top: -20px; width: 320px; height: 320px; padding: 22px; margin: auto; }
.module .bubble.red { top: -40px; }
.module.state .text {
margin-top: -45px;
margin-bottom: 45px;
top: 0;
}
.movement .boy-vs-girl .text {
width: 100%;
text-align: center;
top: 0;
margin-top: 60px;
}
.movement .boy-vs-girl {
min-height: 655px;
}
.module.word-cloud-header .text {
width: 100%;
margin: 0;
text-align: center;
}
.movement .listening-people {
margin-bottom: 0;
}
.contest-form .center {
margin: 0 auto;
}
.contest-form iframe {
width: 100%
}
.file-path {
width: 100%;
border-left: 1px solid;
border-right: 1px solid;
}
.file-wrapper,
.btn.file-button {
width: 100%;
}
.or {
margin-top: 0;
}
.card.meme { background-position: -56px 132px; }
.card.meme > div { padding: 40px 15px; text-align: center; }
.card.meme .btn { margin: 0; width: 100%;}
}
@media (min-width: 480px){
.social .instagram { display: none !important; }
}
@media (min-width: 1200px){
.container {
width: 970px;
}
}
@media (max-width: 1100px){
.tips-vr .cardboard-image {width: 110%;float: left;position:relative;left:-10px;top:10px;}
.tips-vr .text {padding-left: 30px;}
.tips-vr h3 {paddint-top:0px; margin-top: 0px;}
}
@media (max-width: 1024px){
.tips-vr .cardboard-image {}
.tips-vr .text {padding-left: 30px;}
.tips-vr h3 {paddint-top:0px; margin-top: 0px;}
}
@media (max-width: 992px){
.card.keep-your-eyes-on-the-road p {
line-height: 45px;
font-size: 50px;
}
.card.keep-your-eyes-on-the-road .tag
{
font-size:45px;
}
.vr-wrapper.section-1
{
background-size: auto 100%;
}
.container { text-align: center; }
.tips-vr .container { text-align:right;}
.tips-bottom .container,
.vr-wrapper.section-2 .container,
.vr-wrapper.section-4 .container { text-align: left;}
.vr-wrapper.section-2 .container,
.vr-wrapper.section-3 .container,
.vr-wrapper.section-4 .container { padding-left:20px; padding-right:20px;}
.tips-vr .cardboard-image {left:0px;top:15px}
.tips-vr .text {padding-left: 30px;}
.tips-vr h3 {paddint-top:0px; margin-top: 0px;}
.vr-wrapper.section-1 {
padding-top: 8%;
padding-bottom: 10%;
}
.vr-wrapper.section-1 p {
padding-left: 10%;
padding-right: 10%;
padding-bottom: 30px;
}
.vr-wrapper.section-2 {
_padding-top: 5%;
_padding-bottom: 3%;
background-color:white;
}
.vr-wrapper .swirl-car-image {
width: 400px;
left: -50px;
}
.vr-wrapper.section-2 .col-sm-3 {
padding-top: 6.5%;
}
.vr-wrapper.section-3 {
padding-top: 0px;
height: auto;
}
.vr-wrapper.section-3 .col-sm-3 {
padding-top: 6.5%;
}
.vr-wrapper.section-4 {
padding-top: 10%;
height: auto;
padding-bottom: 4%;
}
.vr-wrapper.section-4 .container .row {
padding-top: 0px;
}
.middle-tips { padding-bottom: 40px; }
.middle-tips .orng-header { text-align: center; }
.middle-tips img,
.vr-wrapper.section-1 img.you-tube-button {max-width:150px;}
.vr-wrapper.section-1 img {max-width:220px;}
.vr-wrapper.section-2 img,
.tips-bottom img { width: 100%; max-width: 320px; }
.tips-bottom img { margin-top: 40px; }
.tips-simulator img { width: 70%; max-width: 420px; }
.tips-vr img { width: 100%; max-width: 380px; }
.tips-simulator img { margin-top: 40px; }
.middle-tips .right-align { text-align: center; }
.middle-tips .orng-header { text-align: center; }
.middle-tips .pull-right { float: none !important; }
.vr-wrapper .vr-download-section-buttons { float: none !important; }
.starter-slide img { width: 49%; }
.hash-img { margin: 0; width: 70%; max-width: 350px; position: initial; }
.starter-slide .pick { margin: 30px auto; }
.slide-phone { margin: 0 auto; float: none; width: 70%; max-width: 260px; }
.step-text p { padding: 0; line-height: 33px; }
.carousel-indicators { bottom: -20px; }
.step-text h5 { font-size: 76px; }
/*.block.instagram.thin img { left: 0; }*/
.main-header .logo { position: absolute; left: 4%; top: 0; background-size: 65px 55px;}
.mobile-title { font: 22px "OmnesATT Medium Italic", sans-serif; text-transform: uppercase; color: #0085c5; width: 100%; text-align: center; top: 15px; position: relative; }
.hamburger { position: absolute; top: 10px; right: 15px; }
section.main-header { height: 75px; }
div.view { top: 75px; }
.card.contest { text-align: center; padding: 30px 0; height: auto; }
.spread-the-word .content { text-align: left; }
.vr-wrapper.section-2 img { margin-top:80px;}
}
@media (max-width: 928px){
.main-nav li { margin: 0 10px; }
}
@media (max-width: 866px){
.main-nav li { margin: 0; }
.vr-wrapper.section-2 .col-sm-3 {
padding-top: 10%;
}
.vr-wrapper.section-2 {
max-height: inherit;
height: auto;
padding-top: 0;
}
.vr-wrapper.section-2 img {
margin-top: 80px;
}
}
@media (max-width: 811px){
.vr-wrapper.section-1
{
height:auto;
max-height:inherit;
}
section.main-header { background: #fff !important; }
.main-nav li { display: none; }
.main-nav .mobile-nav { display: block; }
.mobile-header { margin: 0 auto; text-align: left; }
.mobile-header li { display: inline-block; }
.main-header .logo { position: absolute; left: 4%; top: 0; background-size: 65px 55px;}
.mobile-title { font: 22px "OmnesATT Medium Italic", sans-serif; text-transform: uppercase; color: #0085c5; width: 100%; text-align: center; top: 15px; position: relative; }
.hamburger { position: absolute; top: 10px; right: 15px; }
.mobile-links { display: block; position: absolute; top:0; right: 0; width: 100%; padding-left: 20%; -webkit-transform: translateZ(0); }
.page.open-mobile { left: -80%; position: fixed; height: 100%; width: 100%; }
.mobile-links { background: #333333; height: 100%; width:100%; }
.mobile-links a { color: #0085c5; font: 24px "OmnesATT Regular Italic", sans-serif; text-transform: uppercase; }
.mobile-links > li { border-bottom: 1px solid #3e3e3e; padding: 3% 0 3% 9%; background: #333333; }
.mobile-links > li:first-child { margin-top: 75px; border-top: 1px solid #0085c5; }
.mobile-links > li:last-child { border-top: 1px solid #0085c5; border-bottom: none; }
.mobile-links li ul a { color: #0085c5; font-size: 16px; }
.mobile-links li ul li { padding: 3% 0;}
.mobile-links .filter { padding-left: 50px; }
.mobile-links .filter a { font: 20px "OmnesATT Regular Italic", sans-serif; }
.mobile-links li.active a { color: #fff; }
.steps-section { padding: 0 40px 0 40px; }
.close-steps { right: 20px; }
.btn.att-btn.steps-btn { width: 100%; }
.vr-wrapper.section-2 { _padding-bottom: 18%}
.vr-wrapper.section-2 .col-sm-3 {
padding-top: 7%;
}
.tips-bottom { padding-bottom: 70px; }
.tips-simulator { padding-bottom: 30px; }
.get-involved { background:#FFFFFF;}
section.main-header { background:#FFFFFF !important; }
.footer { display:none; }
.spredfast .container { background:#FFFFFF; }
.before-signup.hide-static { background: #FFFFFF; }
.pledge .get-involved .row > .col-sm-2,
.contest .get-involved .row > .col-sm-2
{
width: 100%;
}
.pledge .take-pledge .pledge-counter { font: 45px "OmnesATT Medium Italic"; margin-bottom: -10px; }
.count.mobile { display: block; margin-top: 10px; }
.lightbox .youtube iframe { width: 100%; max-height: 300px; }
.vine-embed { width: 100%; height: 300px; }
.lightbox.instagram .info {
padding: 20px;
background-color: #fff;
display: block;
width: 100%;
}
.pledge .take-pledge { font: 30px "OmnesATT Medium Italic"; }
a.btn.facebook,
a.btn.twitter,
a.btn.instagram-share { font-size:18px; width: 100%; margin: 5px; top: 7px; position: relative; }
.card.social a.btn.instagram-share { width: auto; }
.pledge .take-pledge { padding: 0; }
/*.card.social p { line-height: 15px; }*/
#word-cloud { width: 100%; }
}
@media (max-width: 992px){
section.main-header { background: #fff !important; }
.main-nav li { display: none; }
.main-nav .mobile-nav { display: block; }
.mobile-header { margin: 0 auto; text-align: left; }
.mobile-header li { display: inline-block; }
.main-header .logo { position: absolute; left: 4%; top: 0; background-size: 65px 55px;z-index: 700;}
.mobile-title { font: 22px "OmnesATT Medium Italic", sans-serif; text-transform: uppercase; color: #0085c5; width: 100%; text-align: center; top: 15px; position: relative; }
.hamburger { position: absolute; top: 10px; right: 15px; }
.mobile-links { display: block; position: absolute; top:0; right: 0; width: 100%; padding-left: 20%; -webkit-transform: translateZ(0); }
.page.open-mobile { left: -80%; position: fixed; height: 100%; width: 100%; }
.mobile-links { background: #333333; height: 100%; width:100%;}
.mobile-links a { color: #0085c5; font: 24px "OmnesATT Regular Italic", sans-serif; text-transform: uppercase; }
.mobile-links > li { border-bottom: 1px solid #3e3e3e; padding: 3% 0 3% 9%; background: #333333; }
.mobile-links > li:first-child { margin-top: 75px; border-top: 1px solid #0085c5; }
.mobile-links > li:last-child { border-top: 1px solid #0085c5; border-bottom: none; }
.mobile-links li ul a { color: #0085c5; font-size: 16px; }
.mobile-links li ul li { padding: 3% 0;}
.mobile-links .filter { padding-left: 50px; }
.mobile-links .filter a { font: 20px "OmnesATT Regular Italic", sans-serif; }
.mobile-links li.active a { color: #fff; }
}
@media (max-width: 768px) {
.tips-vr .container,
.tips-bottom .container,
.vr-wrapper.section-2 .container,
.vr-wrapper.section-4 .container { text-align: center;}
.vr-wrapper.section-2 .container,
.vr-wrapper.section-3 .container,
.vr-wrapper.section-4 .container { padding-left:20px; padding-right:20px;}
.vr-wrapper.section-1 p {
padding-top: 30px;
}
.vr-wrapper.section-1 {
padding-top: 90px;
padding-bottom: 120px;
}
.vr-wrapper.section-3 {
padding-top: 5%;
}
.vr-wrapper.section-1 h3 {
font-size:48pt !important;
}
.vr-wrapper.section-2 .col-sm-3 {
padding-top: 0px;
}
.vr-wrapper.section-2 {
max-height: inherit;
height: auto;
padding-bottom: 10%;
}
.vr-wrapper.section-2 p {
width: 100%;
}
.vr-wrapper.section-3 .col-sm-3 {
padding-top: 0px;
}
.vr-wrapper .swirl-car-image {
margin-top: 2px;
margin-bottom: 0px;
width: 100%;
left: 0;
position: relative;
}
.vr-wrapper.section-4 {
padding-top: 5%;
}
.vr-wrapper.section-4 {
max-height: inherit;
height: auto;
padding-bottom: 10%;
}
.vr-wrapper.section-4 p {
width: 100%;
}
.vr-wrapper.section-3, .vr-wrapper.section-4 {
height: auto;
}
.tips-vr .text {padding-left: 30px;}
.tips-vr h3 {margin-top: 40px;}
.tips-vr .cardboard-image
{
left:0%;
float: none;
padding-left:5%;
top:15px;
}
.bottom-vr-video {
float: none;
width: 100%;
margin-bottom: 0px;
margin-top: 5px;
}
}
@media (max-width: 640px) {
.card.keep-your-eyes-on-the-road p {
line-height: 40px;
font-size: 40px;
}
.card.keep-your-eyes-on-the-road .tag {
font-size: 36px;
top: 55%;
}
.vr-wrapper.section-1 img {
width: 55%;
max-width: 55%;
}
.vr-wrapper.section-1 img.you-tube-button
{
width:47%;
max-width:47%;
}
.vr-wrapper.section-2 {
padding-bottom: 20%;
}
.vr-wrapper.section-1 img {
height: auto;
}
.vr-wrapper.section-3 {
padding-top: 9%;
}
.vr-wrapper.section-3 .col-sm-2
{
padding-bottom:10px;
}
.vr-wrapper.section-4 {
padding-top: 13%;
padding-bottom:15%;
}
.vr-wrapper .cardboard-image {
top: -70px;
}
.vr-wrapper.section-1 h3 {
font-size: 45pt !important;
}
#vr-google-button
{
width:53%;
}
}
@media (max-width: 550px) {
.vr-wrapper .cardboard-image {
top: -63px;
}
}
@media (max-width: 523px) {
.card.keep-your-eyes-on-the-road p {
line-height: 35px;
font-size: 30px;
}
.card.keep-your-eyes-on-the-road .tag {
font-size: 26px;
top: 55%;
}
.vr-wrapper.section-1 h3 {
font-size: 45pt !important;
}
.vr-wrapper .cardboard-image {
top: -35px;
}
}
@media (max-width: 480px) {
.card.keep-your-eyes-on-the-road p {
line-height: 35px;
font-size: 30px;
}
.card.keep-your-eyes-on-the-road .tag {
font-size: 26px;
top: 55%;
}
.vr-wrapper .cardboard-image {
top: -40px;
}
.vr-wrapper.section-1 h3 {
font-size: 40pt !important;
}
.vr-wrapper.section-1 {
padding-top: 50px;
}
}
@media (max-width: 420px) {
.card.keep-your-eyes-on-the-road p {
line-height: 25px;
font-size: 25px;
}
.card.keep-your-eyes-on-the-road .tag {
font-size: 20px;
top: 55%;
}
.vr-wrapper.section-1 h3 {
font-size: 38pt !important;
}
.vr-wrapper .cardboard-image {
top: -35px;
}
.tips-vr .cardboard-image
{
left: 2%;
width: 87%;
}
}
@media (max-width: 380px) {
.vr-wrapper.section-1 h3 {
font-size: 35pt !important;
}
.vr-wrapper.section-1 {
padding-top: 50px;
}
}
@media (max-width: 350px)
{
.card.keep-your-eyes-on-the-road p {
font-size: 18px;
top: 55%;
}
}
@media (max-width: 280px)
{
.card.keep-your-eyes-on-the-road p {
top: 35%;
font-size: 15px;
}
}