/*
 Fonts
------------- */

@font-face {
    font-family: "GothamLight";
    src:    url("fonts/GothamLight.eot");
    src:    url("fonts/GothamLight.otf") format('otf'),
    url("fonts/GothamLight.ttf") format('ttf'),
    url("fonts/GothamLight.svg") format('svg'),
    url("fonts/GothamLight.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "GothamBook";
    src: url("fonts/GothamBook.eot");
    src: url("fonts/GothamRounded-Book.otf") format("otf"),
    url("fonts/GothamBook.ttf") format('ttf'),
    url("fonts/GothamBook.svg") format('svg'),
    url("fonts/GothamBook.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

/*
    SVG
***************/



/*
         responsiveness
------------------------------- */

/************************************/
/*    LARGE TABLETS + ALL DESKTOPS  */
/************************************/



@media only screen and (min-width: 880px) {
    * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    html, body {
        font-family: "GothamLight";
        margin: 0;
        padding: 0;
    }
    img {
        opacity: 0.4;
        filter: alpha(opacity=40);/*for IE8 and older */
        max-width:100%;
        height:auto;
    }
    p {
        line-height: 150%;
        font-family: "GothamBook";
    }

    /* ---- grid ---- */

    .grid {
        background: #FFF;
        max-width: 100%;
        padding-bottom: 2.5%;
    }
    /* clearfix */

    .grid:after {
        content: '';
        display: inline-block;
        clear: both;
    }
    /* ---- grid-item ---- */

    .grid-item {
        width: 46%;
        /*height: 240px;*/
        background: #28232a;
        margin-top: 2.5%;
        margin-left: 2.5%;
        /*padding: 5%;*/
    }

    .grid-item--color2 {
        background: #473a41;
    }

    .grid-item--color3 {
        background: #968484 ;
    }

    .grid-item--color4 {
        background: #b4a9ad;
    }

    .grid-item--gigante {
        width: 95%;
        /*height: 1120px;*/
    }

    .grid-item:hover {
        opacity: 0.85;
        cursor: pointer;
    }

    /* Title and Search bar */

    .title_search {
        font: 60px "GothamLight", san-serif;
        color: #473a41;
        font-weight: lighter;
        text-transform: uppercase;
        margin: 2.5%;
        text-decoration: none;
    }

    .title_search:hover {
        cursor: pointer;
    }
    .sub-header {
        font: 25px "GothamLight", san-serif;
        color: black;
        font-weight: lighter;
        margin: 2.5%;
        text-decoration: none;
        line-height: 150%;
    }
    #hide-all {

    }

    /* Drop down issue conversation bubbles */



    .candidate {
        font: 60px "GothamLight", san-serif;
        color: #FFF;
        font-weight: lighter;
        text-align: center;
        position: relative;
    }

    .issue-head {
        height: 240px;
        display: flex;
        overflow: hidden;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .candidate-photo {
        position:absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width:auto;
        max-width:100%;
        height:auto;
        max-height:100%;
    }

    .issue-text {
        background: #e3e3e3 ;
        width: 100%;
        /*height: 880px;*/
        line-height: 150%;
    }

    .text-readmore {
        margin-top: 1%;
    }

    .readmore {
        width: 100%;
    }

    .still-talking, .stopped-talking {
        font: 14px "GothamLight", san-serif;
        font-weight: bold;
        color: black;
        text-align: right;
        padding-right: 5%;
        padding-bottom: 2.5%;
    }

    .issue-text--color2 {
        background: #9b7b81;
    }

    .issue-text--color3 {
        background: #d3c5c5;
    }

    .issue-text--color4 {
        background: #ddcfd4;
    }

    .bubble {
        background-color: #FFF;
        opacity: 0.8;
        text-align: center;
    }

    .smilies {
        z-index:1;
        position:absolute;
        top:0;
        left:0;
        width:auto;
        max-width:100%;
        height:auto;
        max-height:100%;"
    }

    .yru-bubble {
        position: relative;
        width: 10%;
        height: 0;
        padding: 5% 0;
        display: inline-block;
        margin-top: 5%;
        margin-left: 5%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }

    .myth-bubble {
        -moz-border-radius: 25px;
        border-radius: 25px;
        /*height: 30%;*/
        width: 75%;
        display: inline-block;
        margin-top: 10%;
        margin-left: 5%;
        padding: 2.5%;
        line-height: 150%;
    }

    .you-bubble {
        position: relative;
        width: 10%;
        height: 0;
        padding: 5% 0;
        margin-top: 5%;
        margin-right: 5%;
        float: right;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }

    .fact-bubble {
        -moz-border-radius: 25px;
        border-radius: 25px;
        /*height: 30%;*/
        width: 75%;
        display: inline-block;
        margin-top: 10%;
        margin-left: 5%;
        margin-bottom: 10%;
        padding: 2.5%;
        line-height: 150%;
    }

    .fact-bubble p, .myth-bubble p {
        font-size: 19px;
        line-height: 150%;
    }

    .fact-bubble a {
        font-size: 19px;
    }
    .bubble-content {
        font: 14px "GothamLight", san-serif;
        font-weight: normal;
        padding: 2.5%;
        line-height: 150%;
    }

    .source {
        float: right;
        font: 14px "GothamLight", san-serif;
        font-weight: bold;
        padding: 2.5%;
        color: black;
        text-transform: uppercase;
    }

    .tweet-link {
        font: 14px "GothamLight", san-serif;
        font-weight: bold;
        color: black;
    }

    .tweet-image {
        height: 15px;
        width: auto;
        opacity: 1;
    }

    .tweet-image--header{
        margin-left: 2.5%;
    }
    .tweet-image:hover {
        opacity: 0.5;
    }

    /* Form and Disclaimers */


    /* Disclaimer */

    #disclaimer {
        bottom: 0;
        right: 0;
        text-align: center;
        width: 91%;
        display: inline-block;
        padding-top: 1%;
        padding-bottom: 1%;
        margin-left: 3%
    }
    #disclaimer small {
        border: 1px solid #B3B3B3;
        display: block;
        padding: 1%;
        box-sizing: inherit;
    }
    /* Form */

    .bottom-form {
        margin-top: .5%;
        margin-left: 2.5%;
        overflow: hidden;
    }

    input {
        background: #fff;
        border: 1px solid #B3B3B3;
        border-radius: 0;
        color: #575757;
        display: inline-block;
        font-size: 0.95em;
        font-weight: bold;
        /*width: 90%;*/
        margin-top: 1%;
        margin-bottom: .5%;
    }

    input[type="submit"] {
        background: #fff;
        border: 1px solid red;
        color: red;
        display: inline-block;
        text-transform: uppercase;
        -webkit-transition: 0.2s;
        -moz-transition: 0.2s;
        -ms-transition: 0.2s;
        -o-transition: 0.2s;
        transition: 0.2s;
        width: 17%;
        z-index: 2;
    }

    .input-group {
        margin-left: .5%;
        width: 95%;
        position: relative;
        margin-bottom: .5%;

    }
    #firstname {
        width: 47.5%;
    }
    #lastname {
        width: 47.5%;
        margin-left: 2.5%
    }
    #email {
        width: 47.5%;
    }
    #zip {
        width: 30%;
        margin-left: 2.5%;
    }
    /*#submit {*/
    /*background: #fff;*/
    /*border: 1px solid red;*/
    /*color: red;*/
    /*display: inline-block;*/
    /*text-transform: uppercase;*/
    /*-webkit-transition: 0.2s;*/
    /*-moz-transition: 0.2s;*/
    /*-ms-transition: 0.2s;*/
    /*-o-transition: 0.2s;*/
    /*transition: 0.2s;*/
    /*width: 15%;*/
    /*z-index: 2;*/
    /*}*/

    /******************************/
    /*  ID's for scrolling       */
    /*****************************/

    #bush {}
    #bush-expanded {}
    #aca {}
    #aca-expanded {}
    #cruz {}
    #cruz-expanded {}
    #climate {}
    #climate-expanded {}
    #economy {}
    #economy-expanded{}
    #equality {}
    #equality-expanded {}
    #immigration {}
    #immigration-expanded {}
    #kasich {}
    #kasich-expanded {}
    #rubio {}
    #rubio-expanded {}
    #trump {}
    #trump-expanded {}

    .svg-wrapper {
        transform: translate(-0.7%, 37.2%) scaleX(1.064);
        margin-top: -10%;
        opacity: 0.1;
    }

    .scaled-head-svg-desktop {
        width: 95%;
        margin-left: 2.5%;

    }

    .scaled-head-svg-mobile {
        display:none;
    }

}

/****************************/
/*   Small Tablets + Phones */
/****************************/

@media only screen and (max-width: 879px) {
    * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    body {
        font-family: "GothamLight", san-serif;
    }

    img {
        opacity: 0.4;
        filter: alpha(opacity=40); /*for IE8 and older */
    }

    p {
        line-height: 150%;
        font-family: "GothamBook";
    }

    /* ---- grid ---- */
    .grid {
        background: #EEE;
        max-width: 100%;
    }

    /* clearfix */
    .grid:after {
        content: '';
        display: block;
        clear: both;
    }

    /* ---- grid-item ---- */
    .grid-item {
        width: 100%;
        /*height: 120px;*/
        float: left;
        background: #28232a;
    }

    .grid-item--color2 {
        background: #473a41;
    }

    .grid-item--color3 {
        background: #968484;
    }

    .grid-item--color4 {
        background: #b4a9ad;
    }

    .grid-item--gigante {
        width: 100%;
        /*height: 1000px;*/
    }

    .grid-item:hover {
        opacity: 0.85;
        cursor: pointer;
    }

    /* Title and search bar */
    .title_search {
        font: 30px "GothamLight", san-serif;
        color: #473a41;
        font-weight: lighter;
        text-transform: uppercase;
        text-decoration: none;
        margin: 2.5%;
    }
    .title_search:hover {
        cursor: pointer;
    }

    .sub-header {
        font: 16px "GothamLight", san-serif;
        color: black;
        font-weight: lighter;
        margin: 2.5%;
        text-decoration: none;
    }

    #hide-all {

    }

    /* Drop down issue conversation bubbles */
    .candidate {
        font: 40px "GothamLight", san-serif;
        color: #FFF;
        font-weight: lighter;
        position: relative;
        text-align: center;
    }

    .issue-head {
        /*height: 120px;*/
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        text-transform: uppercase;
        padding-top: 5%;
        padding-bottom: 6%;
        min-height: 200px;

    }

    .candidate-photo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 100%;
        overflow: hidden;
    }

    .candidate-photo img {
        width: 85%;
        height: auto;
        overflow: hidden;
        padding-top: 1%;
        padding-bottom: 1%;
    }

    .issue-text {
        background: #e3e3e3;
        width: 100%;
        /*height: 880px;*/
    }

    .text-readmore {
        margin-top: 1%;
    }

    .readmore {
        width: 100%;
    }

    .still-talking, .stopped-talking {
        font: 14px "GothamLight", san-serif;
        font-weight: bold;
        color: black;
        text-align: right;
        padding-right: 5%;
        padding-bottom: 2.5%;
    }

    .issue-text--color2 {
        background: #9b7b81;
    }

    .issue-text--color3 {
        background: #d3c5c5;
    }

    .issue-text--color4 {
        background: #ddcfd4;
    }

    .bubble {
        background-color: #FFF;
        opacity: 0.8;
        text-align: center;
    }

    .smilies {
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 100%;
    }

    .yru-bubble {
        position: relative;
        width: 20%;
        height: 0;
        padding: 10% 0;
        display: inline-block;
        margin-top: 5%;
        margin-left: 5%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }

    .myth-bubble {
        -moz-border-radius: 25px;
        border-radius: 25px;
        /*height: 25%;*/
        width: 65%;
        display: inline-block;
        margin-top: 10%;
        margin-left: 5%;
        padding: 1%;
        line-height: 150%;
    }

    .you-bubble {
        position: relative;
        width: 20%;
        height: 0;
        padding: 10% 0;
        margin-top: 5%;
        margin-right: 5%;
        margin-left: 5%;
        float: right;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }

    .fact-bubble {
        -moz-border-radius: 25px;
        border-radius: 25px;
        /*height: 45%;*/
        width: 65%;
        display: inline-block;
        margin-top: 10%;
        margin-left: 5%;
        margin-bottom: 10%;
        padding: 1%;
        line-heigh: 150%;
    }

    .fact-bubble p, .myth-bubble p {
        font-size: 19px;
        line-height: 150%;
    }

    .fact-bubble a {
        font-size: 19px;
    }

    .bubble-content {
        font: 14px "GothamLight", san-serif;
        font-weight: normal;
        padding: 2.5%;
        line-height: 150%;
    }

    .source {
        float: right;
        font: 14px "GothamLight", san-serif;
        font-weight: bold;
        padding: 2.5%;
        color: black;
        text-transform: uppercase;
    }

    .tweet-link {
        font: 14px "GothamLight", san-serif;
        font-weight: bold;
        color: black;
    }

    .tweet-image {
        height: 15px;
        width: auto;
        opacity: 1;
    }

    .tweet-image--header {
        margin-left: 2.5%;
    }

    .tweet-image:hover {
        opacity: 0.5;
    }

    /* Forms and Disclaimers */
    #disclaimer {
        bottom: 0;
        right: 0;
        text-align: center;
        width: 91%;
        display: inline-block;
        padding-top: 1%;
        padding-bottom: 1%;
        margin-left: 3%
    }

    #disclaimer small {
        border: 1px solid #B3B3B3;
        display: block;
        padding: 1%;
        box-sizing: inherit;
    }

    /* Form */
    .bottom-form {
        margin-top: .5%;
        margin-left: 2.5%;
        overflow: hidden;
    }

    input {
        background: #fff;
        border: 1px solid #B3B3B3;
        border-radius: 0;
        color: #575757;
        display: inline-block;
        font-size: 0.95em;
        font-weight: bold;
        /*width: 90%;*/
        margin-top: 1%;
        margin-bottom: 1%;
    }

    input[type="submit"] {
        background: #fff;
        border: 1px solid red;
        color: red;
        display: inline-block;
        text-transform: uppercase;
        -webkit-transition: 0.2s;
        -moz-transition: 0.2s;
        -ms-transition: 0.2s;
        -o-transition: 0.2s;
        transition: 0.2s;
        width: 98.5%;
        z-index: 2;
    }

    .input-group {
        margin-left: .5%;
        width: 95%;
        position: relative;
        margin-bottom: 1%;

    }

    #firstname {
        width: 47.5%;
    }

    #lastname {
        width: 47.5%;
        margin-left: 2.5%
    }

    #email {
        width: 47.5%;
    }

    #zip {
        width: 47.5%;
        margin-left: 2.5%;
    }

    /******************************/
    /*  ID's for scrolling       */
    /*****************************/
    #bush {
    }

    #bush-expanded {
    }

    #aca {
    }

    #aca-expanded {
    }

    #cruz {
    }

    #cruz-expanded {
    }

    #climate {
    }

    #climate-expanded {

    }
    #economy {
    }

    #economy-expanded{

    }
    #equality {
    }

    #equality-expanded {
    }

    #immigration {
    }

    #immigration-expanded {
    }

    #kasich {
    }

    #kasich-expanded {
    }

    #rubio {
    }

    #rubio-expanded {
    }

    #trump {
    }

    #trump-expanded {
    }

    /* svg stuff */

    .svg-wrapper {
        /*transform: translate(5%, 27%);*/
        margin-top: -10%;
        opacity: 0.9;
    }

    .scaled-head-svg-desktop {
        display: none
    }

    .scaled-head-svg-mobile {

    }
}