/* Homepage */
#mod-custom125 {
  margin-bottom: 2.75rem;
}

#mod-custom125 #startcontainer {
    padding-top: 1.25rem;
}

#mod-custom125 .start .col-md-4 .start-item {
    box-shadow: 0 5px 10px -10px rgba(0, 0, 0, 1);
    border: 1px solid #ddd;
    height: 100%
}

#mod-custom125 .start .caption {
    padding: 0 10px 10px 10px;
}

#mod-custom125 .start .btn {
    margin-top: 10px;
}

#mod-custom125 .start .btn.btn-primary {
    letter-spacing: 1px;
}

@media only screen and (min-width: 768px) and (max-width: 979px){
    /** On most tablets this makes the "Review Tracker" text appear on one line **/
    #mod-custom125 .start .btn-primary {
        padding: 19px 7px;
        letter-spacing: 0;
        font-size: 0.8rem;
    }
}

.itemid-435 h2 {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}
/* End Homepage */

/*Roadmap Article*/
[id="3x"]:target,
[id="37"]:target,
[id="38"]:target,
[id="39"]:target,
[id="310"]:target,
[id="4"]:target,
#fw-1x:target,
#fw-2x:target,
#framework:target {
    margin-top: -85px;
    padding-top: 85px;
}

h2.roadmap:before {
    background: #1b63a2;
    bottom: -2px;
    content: "";
    height: 3px;
    position: absolute;
    width: 50px;
}

h2.roadmap {
    border-bottom: 1px solid #e6eaf0;
    display: block;
    padding: 0 0 14px;
    position: relative;
}

h4.roadmap:before {
    background: #1b63a2;
    bottom: -2px;
    content: "";
    height: 3px;
    position: absolute;
    width: 50px;
}

h2.roadmap,
h3.roadmap,
h4.roadmap {
    color: #1b63a2;
}

h4.roadmap {
    position: relative;
    display: block;
    padding: 0 0 14px;
}

/*End Roadmap Article changes*/

/* jQuery Hackathon Article */
.jq15 {
    color: #48576b;
    margin: 0 -20px;
    width: auto;
}

.jq15 .link {
    background: #47bca5 none repeat scroll 0 0;
    border-radius: 2px;
    color: white;
    padding: 8px 18px 10px;
}

.jq15.header {
    background: #545e6c none repeat scroll 0 0;
    border-top: 4px solid #29303a;
    color: white;
    margin-top: -20px;
    padding: 40px 0;
    position: relative;
    text-align: center;
}

.jq15.header h1 {
    font-size: 60pt;
    font-weight: bold;
}

.jq15.header h1 span#fun {
    color: #2d90d6;
}

.jq15.header h1 span img {
    display: none;
    margin-top: -130px;
    position: absolute;
}

.jq15.header h1 span#pizza img {
    margin-left: -70px;
}

.jq15.header h1 span#bugs img {
    margin-left: -110px;
}

.jq15.header h1 span#fun img {
    margin-left: -250px;
}

.jq15.header ul li {
    list-style: outside none none;
}

.jq15.helpers {
    border-bottom: 8px solid transparent;
    border-top: 8px solid transparent;
}

.jq15.helpers > div {
    min-height: 240px;
    padding: 20px;
}

.jq15.helpers > div:first-child {
    padding-left: 30px;
}
.jq15.helpers > div:hover {
    background: #eaedf1 none repeat scroll 0 0;
}

.jq15.helpers img {
    display: inline-block;
    float: left;
    margin: 0 20px 20px 0;
    max-width: 64px;
}

.jq15.helpers a {
    clear: both;
    display: inline-block;
    float: left;
    height: 80px;
    margin: 0 20px 20px 0;
}

.jq15.helpers a img {
    margin: 0;
}

.jq15.helpers p {
    margin: 11px 0 0;
}

.jq15.helpers a.link {
    height: auto;
}

.jq15.helpers p a {
    display: inline;
    float: none;
    height: auto;
}

.jq15.participation .col-md-12 {
    background: #eaedf1 none repeat scroll 0 0;
    padding: 20px;
}

.jq15.participation .col-md-12 h2 {
    padding-bottom: 10px;
}

.jq15.sponsor {
    padding-bottom: 40px;
}

.jq15.sponsor h2 {
    padding: 20px 0 10px 20px;
}

.jq15.sponsor > div a {
    display: block;
    padding: 20px;
}

.jq15.sponsor > div img {
    max-width: 100%;
}

.jq15.sponsor .link {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    float: right;
    font-size: 10pt;
    margin: 30px -1px 0 0;
    padding: 14px 20px;
    transition: all 0.5s ease-in 0s;
}

.jq15.sponsor .link span {
    margin-right: 10px;
}

.jq15.sponsor.epic {
}

.jq15.sponsor.epic h2 {
    font-size: 30pt;
}

.jq15.sponsor.platinium {
    background: #dadadd none repeat scroll 0 0;
    color: #565656;
}

.jq15.sponsor.platinium h2 {
    font-size: 30pt;
}

.jq15.sponsor.gold {
    color: #996f0b;
}

.jq15.sponsor.gold h2 {
    font-size: 26pt;
}

.jq15.sponsor.silver {
    background: #eaedf1 none repeat scroll 0 0;
    color: #989898;
}

.jq15.sponsor.silver h2 {
    font-size: 22pt;
}

.jq15.sponsor.silver .row-fluid {
    margin-bottom: 20px;
}

.jq15.sponsor.silver a {
    font-size: 10pt;
    padding: 10px;
    text-align: center;
}

.jq15.sponsor.silver img {
    border-radius: 120px;
    margin: 0 0 10px;
    max-height: 100%;
    max-width: 100%;
}

.jq15.credits .col-md-12 {
    background: #f4f6f7 none repeat scroll 0 0;
    border-bottom: 0px solid #a7aeb8;
    border-top: 4px solid #29303a;
    color: #a7aeb8;
    font-size: 9pt;
    padding: 20px;
    text-align: center;
    transition: all 1s ease-in 0s;
}

.jq15.credits .col-md-12:hover {
    border-bottom: 0px solid #48576b;
    color: #48576b;
}

.jq15.credits .col-md-12 h2 {
    padding-bottom: 20px;
}

/*Responsive*/
@media (min-width: 768px) {
    .jq15.header h1 {
        margin-top: 130px;
    }

    .jq15.header h1 span img {
        display: inline;
    }

    .jq15.sponsor .link {
        opacity: 0.6;
    }

    .jq15.sponsor .link:hover {
        opacity: 1;
    }

    .jq15.participation dt {
        float: left;
        padding-right: 20px;
        text-align: right;
        width: 100px;
    }

    .jq15.credits .col-md-12 {
        text-align: center;
    }

    .jq15.credits dl {
        margin: auto;
        max-width: 400px;
        text-align: left;
    }
    .jq15.credits dt {
        float: left;
        padding-right: 20px;
        text-align: right;
        width: 160px;
    }
}
/* End jQuery 2015 Hackathon */

/* BPF Image 2013, 2014 and 2019 articles */
.pbf img {
  max-width: 100%;
  height: auto;
}

.effectFade img {
    transition: transform 0.5s ease-in-out 0s;
}

.effectFade:hover img {
    transform: scale(0);
}

.effectSpin img {
    transition: transform 0.5s ease-in-out 0s;
}

.effectSpin:hover img {
    transform: rotate(360deg);
}

@keyframes shakennotstirred {
    0% {
        transform: translate(2px, 1px) rotate(0deg);
    }
    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }
    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }
    30% {
        transform: translate(0px, 2px) rotate(0deg);
    }
    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }
    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }
    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }
    70% {
        transform: translate(2px, 1px) rotate(-1deg);
    }
    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }
    90% {
        transform: translate(2px, 2px) rotate(0deg);
    }
    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

@keyframes shakennotstirred {
    0% {
        transform: translate(2px, 1px) rotate(0deg);
    }
    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }
    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }
    30% {
        transform: translate(0px, 2px) rotate(0deg);
    }
    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }
    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }
    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }
    70% {
        transform: translate(2px, 1px) rotate(-1deg);
    }
    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }
    90% {
        transform: translate(2px, 2px) rotate(0deg);
    }
    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

.effectFun:hover img:nth-child(2), .effectFun:focus img:nth-child(2) {
    animation: 3s linear 0s normal none infinite running shakennotstirred;
}

/* Responsiveness tweak to com_contact forms */
@media only screen and (max-width: 480px){
    /* Wraps the copy email field onto a single line for small screens */
    #jform_contact_email_copy-lbl {
        margin-right: 10px;
        float: left;
    }
}

/* We should migrate to float-sm-start and float-sm-end but kept this as is for now to ease the j4 migration */
@media only screen and (max-width: 320px){
    img.float-start,img.float-end {
        float: none;
    }
}