/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px){
    .container {
        padding-left: 35px;
        padding-right: 35px;
    }

    #phoneWithApp {
        display: block;
        margin: 65px auto -1px auto;
        max-width: 90%;
    }

    .app-feature > div p {
        font-size: 16px;
    }

    .app-feature > div h3 {
        font-size: 28px;
    }
}

#disclaimer {
  padding-top: 100px;
  padding-bottom: 100px;
}

.col-3 p{
  min-height: 80px;
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 1070px){

    h1 {
        font-size: 62px;
    }

    h2 {
        font-size: 40px;
    }

    h3 {
        font-size: 28px;
    }

    #headerTextContainer .button {
        width: 300px;
        font-size: 24px;
        height: 60px;
        line-height: 60px;
    }

    .button {
        /*
        font-size: 17px;
        height: 45px;
        line-height: 45px;
        max-width: 90%;
        */
    }

    p,
    #howToSendMoneyToBankAccount h4,
    li {
        font-size: 18px;
    }

    #needToSendMoneyRegularly .phone-with-app {
        display: none;
    }

    #needToSendMoneyRegularly {
        padding-bottom: 90px;
    }
}

@media only screen and (max-width : 1070px) {
    #trustPilotReviews {
        max-width: 90%;
    }
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px){

    h1 {
        font-size: 57px;
    }

    #calculatorContainer .col-4 {
        padding-left: 0;
    }

    #howToSendMoneyToBankAccount .toggle-target {
        margin-left: 110px;
    }

    .ordered-list .list-item:after {
        left: 37px;
        top: 75px;
    }

    .ordered-list .number {
        width: 75px;
        height: 75px;
        line-height: 75px;
    }

    .col-3-md {
        width: 100%;
        margin-bottom: 75px;
        height: auto;
    }

    .col-3 p{
      min-height: 0;
    }


    #headerPhotoContainer {
        height: 490px;
    }

    #calculatorContainer .col-4 {
        width: 100%;
        margin-bottom: 25px;
        display: flex;
        height: 75px;
    }

    #calculatorContainer .currency-selector {
        margin-top: 0;
    }

    #calculatorContainer .col-container label {
        display: block;
        border-radius: 0;
        background: #F5F5F5;
        width: auto;
        height: 100%;
        padding: 24px;
        padding-bottom: 23px;
        border: 1px solid #D0D0D0;
        border-right: 0 none;
        width: 180px;
    }

    #whyTransferToBankAccount .col-3 > img {
        max-width: 999px;
        height: 40px;
    }



    #calculatorContainer .col-container input[type=text] {
        margin-top: 0;
        width: 84%;
        max-width: 100%;
    }

    #calculatorContainer .dd-container {
        right: 0;
    }

    .form-row {
        margin-bottom: 20px;
    }

    #whyTransferToBankAccount .col-3-md {
        margin-bottom: 30px;
    }

    .ruler {
        max-width: 90%;
    }

    h2 {
        margin-top: 60px;
    }

    .ruler {
        margin-top: 60px;
        max-width: 90%;
    }

    #needToSendMoneyRegularly {
        margin-top: 0;
    }

    .yellow-panel h2 {
        margin-top: 60px;
    }

    #needToSendMoneyRegularly {
        padding-bottom: 60px;
    }

    .grey-panel {
        margin-top: 0;
        padding-bottom: 30px;
    }

    #readyToSend {
        margin-bottom: 60px;
    }

    #chooseHowYouSendMoney .col-4 {
        box-sizing: border-box;
        padding-left: 5px;
        padding-right: 5px;
    }

}

@media only screen and (max-width : 530px) {
    .app-button {
        margin-top: 5px;
        margin-bottom: 5px;
        display: block;
    }
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px){
    #app-phone{
      display: none;
    }

    .pink-bar h2{
      font-size: 26px;
    }

    .col-4-sm {
        width: 100%;
        margin-bottom: 50px;
    }

    h1 {
        font-size: 46px;
    }

    #whyTransferToBankAccount .col-3-md:nth-child(4), #whyTransferToBankAccount .col-3-md:nth-child(5) {
       margin-bottom: 0;
    }

    .col-3-md {
        height: auto;
    }

    .ordered-list .list-item:after {
        position: absolute;
        content: " ";
        width: 1px;
        border-right: 1px dashed #979797;
        height: 100%;
        bottom: auto;
        left: 32px;
        top: 75px;
    }

    #howToSendMoneyToBankAccount .toggle-target {
        margin-left: 100px;
    }

    #trustPilotReviews .rw-text {
        font-size: 18px;
    }

    #trustPilotReviews .rw-inner {
        width: 90%;
    }

    #trustPilotReviews .review-author-container {
        font-size: 16px;
    }

    #trustPilotReviews .carousel-indicators {
        display: none;
    }

    #trustPilotReviews.trustpilot-logo p {
        font-size: 15px;
    }

    #trustPilotReviews.trustpilot-logo img {
        max-width: 100px;
    }

    #trustPilotReviews .container-review {
        min-height: 260px;
        position: relative;
        padding: 30px 0;
        margin: 0 20px;
    }

    .rw-text:before,
    .rw-text:after {
       display: none;
    }

    #trustPilotReviews {
        max-width: 80%;
    }

    #chooseHowYouSendMoney .col-4-sm:nth-child(2) {
        order: -1;
    }

    #calculatorContainer .col-container input[type=text] {
        width: 75%;
    }

    #headerPhotoContainer {
        height: 390px;
    }

    .ordered-list .number {
        width: 65px;
        height: 65px;
        line-height: 65px;
        flex-basis: 65px;
        flex-grow: 0;
    }

    .ordered-list .list-item h3 {
        max-width: 300px;
    }

    .button {
        margin-top: 30px;
        font-size: 24px;
        height: 62px;
        line-height: 62px;
        width: 300px;
    }

    #chooseHowYouSendMoney .col-4-sm:last-child {
        margin-bottom: 0;
    }


}

@media only screen and (max-width : 660px) {
    h1 {
        font-size: 38px;
    }

    #calculatorContainer .col-container input[type=text],
    #calculatorContainer span.currency,
    #calculatorContainer .chosenImage-container .chosen-single span {
        font-size: 25px;
    }

    #calculatorContainer label {
        font-size: 16px;
    }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px){

    #whyTransferToBankAccount{
      margin: 25px 0;
    }

    #howToSendMoneyToBankAccount .toggle-target {
        margin-left: 71px;
    }

    .col-3-md {
        height: auto;
    }

    #fewReasonsToTransferToMexico .col-3-md{
      margin-bottom: 75px;
    }

    #calculatorContainer .chosenImage-container .chosen-single span {
        background-position: right center;
        padding-left: 5px;
        margin-right: 39px;
    }

    #calculatorContainer .chosen-container-single .chosen-single {
        background-image: url('../img/dropdown-arrow.svg');
    }

    #chooseHowYouSendMoney .button {
        width: 100%;
    }

    #chooseHowYouSendMoney .button {
        margin-top: 0;
    }

    #whyTransferToBankAccount .show-on-mobile {
        display: block;
    }

    #whyTransferToBankAccount .col-container p {
        font-size: 14px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .ordered-list .list-item:after {
        left: 29px;
        top: 65px;
    }

    #whyTransferToBankAccount .col-container col-3-md.show-on-mobile {
        display: block;
    }

    .button {
        font-family: 'EuclidWU-Medium', open sans;
    }

    #currentExchangeRate {
        margin-top: 0;
    }

    #estimatedExchangeRate .container > p.regular {
        display: none;
    }

    #whyTransferToBankAccount p.regular {
        display: none;
    }

    #estimatedExchangeRate .container > p {
        display: inline-block;
        text-align: left;
    }

    #calculatorContainer .col-4.hide-on-mobile {
        display: none;
    }

    #exchangeDetails {
        margin-top: 15px;
    }

    #estimatedExchangeRate .container.calculator-button-mobile > p {
        display: inline-block;
        width: 100%;
        margin-top: 0;
    }

    #estimatedExchangeRate .container#currentExchangeRate > p {
        display: inline;
    }

    #headerTextContainer {
        max-width: 60%;
    }

    .ordered-list .list-item h3 {
        max-width: 250px;
        line-height: 1.3;
        margin-top: 0;
    }

    .hide-on-mobile {
        display: none;
    }

    .show-on-mobile {
        display: inherit;
    }

    #calculatorContainer .col-container label {
        padding-right: 5px;
        padding-left: 5px;
        text-align: center;
    }

    #needToSendMoneyRegularly {
        margin-top: 0;
        padding-bottom: 15px;
    }

    #calculatorContainer .col-container input[type=text] {
        width: 55%;
    }

    #trustedBy {
        display: none;
    }

    .yellow-panel h2 {
        margin-top: 50px;
        margin-bottom: 30px;
    }

    .ordered-list .number {
        margin-right: 10px;
    }

    h3 {
        font-size: 23px;
    }

    p, #howToSendMoneyToBankAccount h4, li {
        font-size: 16px;
        margin-bottom: 0;
    }

    .container {
        padding-left: 30px;
        padding-right: 30px;
    }

    #chooseHowYouSendMoney {
      margin-top: 30px !important;
      margin-bottom: 50px !important;
    }

    .ordered-list .number {
        width: 60px;
        height: 60px;
        line-height: 60px;
        flex-basis: 60px;
        flex-grow: 0;
    }

    #headerPhotoContainer {
        background-position: -250px 0;
        height: 290px;
    }

    #headerPhotoContainer h1 {
        font-size: 33px;
        letter-spacing: 0;
    }

    h2 {
        font-size: 30px;
        margin-top: 40px;
    }

    #headerTextContainer .button {
        display: block;
        width: 170px;
        height: 35px;
        font-size: 18px;
        line-height: 36px;

    }

    .ruler {
        margin-top: 40px;
    }

    #chooseHowYouSendMoney h2 {
        margin-bottom: 35px;
    }

    #chooseHowYouSendMoney .col-4:last-child {
        margin-bottom: 0;
    }

    #readyToSend {
        margin-bottom: 50px;
    }

    .grey-panel {
        padding-bottom: 30px;
    }

    #estimatedExchangeRate .container > h2 {
        display: none;
    }

    #disclaimer {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    #disclaimer .container p {
        font-size: 12px;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    #exchangeDetails a {
        font-size: 19px;
    }
}

@media only screen and (max-width : 380px){
    .ordered-list .list-item h3 {
        font-size: 20px;
        max-width: 230px;
    }

    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media only screen and (max-width : 440px) {
    #calculatorContainer .col-container label {
        padding-right: 0;
        width: 155px
    }

    #calculatorContainer span.currency {
        padding-left: 5px;
        width: 30px;
        text-align: center;
    }
}

@media only screen and (max-width : 400px) {
    #calculatorContainer .col-container label {
        width: 100%;
        padding: 0;
        border: 0 none;
        background-color: #FFF;
        text-align: left;
        margin-bottom: 5px;
    }

    #calculatorContainer .col-4 {
        display: block;
        height: auto;
    }

    #calculatorContainer .col-container input[type=text] {
        width: 67%;
    }

}