body {
    font-family: Roboto;
}

a { 
    color: #EE4477;
}


.hero {
    background-color: #EE4477 !important;   
}

.jumbotron-fluid {
    padding: 1rem 0 0 0 !important;
    margin-bottom: 56px !important;
}

nav {
    margin:32px 0 64px 0;
}

#cities {
    display: inline;
    top: 5px;
    position: relative;
    margin-left:8px;
}

h1.logo {
    display:inline;
}

a.city {
    font-family: Roboto;
    font-size: 14px;
    line-height: 16px;
    margin-left:8px;
    color:#941A3F !important;
    
}

a.city:first-child {
    margin-left:0;
}

a.city.active {
    color: #FFFCFC !important;
}

.hook {
font-family: Karla;
    font-style: normal;
    font-weight: bold !important;
    font-size: 48px !important;
    line-height: 105.5% !important;
    /* or 47px */
    margin-bottom:64px;
    letter-spacing: -0.07em;
    color: #FFFCFC;
}



a.cta   {
    background: #FFFCFC;
    border-radius: 4px;
    font-family: Roboto;
    font-style: normal;
    font-size: 14px;
    line-height: 16px;
    text-transform: uppercase;
    padding: 1.2rem 1rem;
    border: none;
    margin-bottom: 48px;
    
}

a.cta.primary {
    color:#EE4477 !important;
}

a.cta.primary:hover {
    text-decoration: none;
}

a.cta.secondary {
    background: #EE4477;
    margin-left:16px;
    color:  #FFFCFC;
    border: none;
    text-align: center;
    min-width: 230px;
}

a.cta.secondary:hover {
    text-decoration: underline;
}

.hero-image {
    margin-top:100px;
}


.card {
    border:1px solid #E8E8E8;
    margin-bottom:32px;
    box-sizing: border-box;
    padding: 0 !important;
    box-sizing: border-box;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.06);
}

.card.empty {
    border:1px dashed #EE4477;
}

.card.empty a {
    height: 100%;
    display: block;
    padding-top:50%;
    color: #EE4477;
    text-align: center;
}

.card.empty span.icon-add {
    display:block;
    background-image: url(../img/icons-16px.svg);
    background-position: 0 -160px;
    height: 34px;
    width: 34px;
    margin:0 auto;
    background-repeat: no-repeat;
}

span.org-logo {
    width:54px;
    height:54px;
    border:1px solid #e8e8e8;
    border-radius: 4px;
    background-image: url('../img/org-logos.png');
    display: block;
    margin-bottom:16px;
}

span.org-logo.bamx{
    background-position: 0 814px;
}

span.org-logo.ch-gdl{
    background-position: 0 756px;
}

span.org-logo.ch-kamami {
    background-position: 0 700px;
}

span.org-logo.ch-naandi {
    background-position: 0 646px;
}
span.org-logo.canica {
    background-position: 0 592px;
}
span.org-logo.complices {
    background-position: 0 540px;
}
span.org-logo.galilea {
    background-position: 0 485px;
}
span.org-logo.meson {
    background-position: 0 431px;
}
span.org-logo.mg-esperanza {
    background-position: 0 378px;
}
span.org-logo.ministerios {
    background-position: 0 324px;
}
span.org-logo.magdalena {
    background-position: 0 270px;
}


span.org-logo.tiempo-nuevo {
    background-position: 0 213px;
}
span.org-logo.unidos {
    background-position: 0 161px;
}
span.org-logo.bred {
    background-position: 0 108px;
}

span.org-logo.mamaac {
    background-position: 0 54px;
}

.card-content-body p, ul, #footer span {
    font-size: 14px !important;
    line-height: 20px;
    /* or 143% */
    color: #6b6b6b;
    margin-bottom: 0;
}

.card-content-body ul {
    padding-left: 10px;
    list-style-image: url('../img/list-circle.svg');
    margin-bottom: 0;
}

.card-content-body ul.no-decoration {
    list-style-type: none;
    list-style-image: none;
    padding-left: 0px;
}

.card-content-body ul.no-decoration li span {
    font-weight: 700;
}

.card-content-body ul li {
    margin-bottom:4px;
}

h4 {
    font-family: Karla;
    font-style: normal;
    font-weight: normal !important;
    font-size: 20px !important;
    line-height: 25px;
    /* or 119% */

    letter-spacing: -0.06em;
    text-transform: capitalize;

    color: #343434 !important;
}
.card-content-body {
    border-bottom:1px solid #E8E8E8;
    width:100%;
    padding: 20px 24px 20px;
}

.card-content-body img {
    margin-bottom:16px;
    
}

.card-content-body.needs {
    border-bottom: none;
    padding-bottom: 40px;
}

.card-content-body:last-child {
    border-bottom: none;
}

.card-content-left {
    width: 48%;
    margin-right:2%;
    float: left;
}

.card-content-right {
    width: 48%;
    margin-left:2%;
    float: left;
}

.card-buttons {
    background: #FAFAFA;
    text-align: center;
    padding:16px 0;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    color: #FF2D92;
    border-top: 1px solid #E8E8E8;
    margin-bottom: 0;
    
}

.card-buttons a.card-cta {
    display: block;
    color:#EE4477;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 20px;
}

.card-buttons a.card-cta.disabled {
    color: #6B6B6B;
    cursor: auto;
    
}

.card-buttons a.card-cta.disabled:hover {
    color: #6B6B6B;
    
}
.card-buttons a.card-cta:hover {
    text-decoration: none;
}

.card-buttons span.icon-cta {
    height: 32px;
    width: 32px;
    display: block;
    background-image: url(../img/icons-16px.svg);
    margin: 0 auto 8px;
}

.card-buttons span.icon-cta.phone {
    background-position: 0 -52px;
}

.card-buttons span.icon-cta.phone.disabled {
    background-position: 0 -88px;
}


.card-buttons span.icon-cta.site {
    background-position: 0 -124px;
}

.card-buttons a.card-cta span {
    font-size: 11px;
    line-height: 13px;
/* identical to box height */
    text-align: center;
    color: #808080; 
    text-transform: uppercase;
    display: block;
}

span.icon-cta-title {
    margin-bottom: 2px;
}


.info-title {
    margin-bottom: 8px;
}

.card-content-body .info-title span{
    font-weight: bold;
    font-size: 12px;
    line-height: 16px;
    text-transform: uppercase;
    color:#565656;
    letter-spacing: -0.03em;
}

img.icon-contact {
    background-image: url(../img/icons-16px.svg);
    background-position: 0px -4px;
    padding-left: 16px;
    height: 16px;
    width: 16px;
    margin-bottom: 0px;
    margin-right: 4px;
}

img.icon-contact.icon-times {
    background-position: 0px -20px;
}

img.icon-contact.icon-needs {
    background-position: 0px -36px;
}

.card-content-body h5 span {
    width: 16px;
    height: 16px;
    display: block;
}

a.map {
    font-style: normal;
    font-weight: normal;
    text-transform: none;    
    font-size: 11px;
    line-height: 126.3%; 
    /* identical to box height, or 15px */
    color:#EE4477;  
    display: block;
    margin-top:4px;
}

a.map:hover {
    color:#EE4477;  

}

#footer {
    text-align: center;
    width:100%;
    margin:40px 0;
}

#footer a {
    display: block;
    font-size:14px;
    color:#EE4477;
}

#footer a.logo-footer {
    margin-bottom:8px;
}

#footer span {
    display: block;
    margin-bottom: 24px;
}

.learn-footer {
    margin-bottom:40px;
}


/*Modal*/

/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add "left" or "right" in modal parent div, after class="modal".
* Get free snippets on bootpen.com
*******************************/
	.modal.left .modal-dialog,
	.modal.right .modal-dialog {
		position: fixed;
		margin: auto;
		width: 320px;
		height: 100%;
		-webkit-transform: translate3d(0%, 0, 0);
		    -ms-transform: translate3d(0%, 0, 0);
		     -o-transform: translate3d(0%, 0, 0);
		        transform: translate3d(0%, 0, 0);
	}

	.modal.left .modal-content,
	.modal.right .modal-content {
		height: 100%;
		overflow-y: auto;
	}
	
	.modal.left .modal-body,
	.modal.right .modal-body {
		padding: 15px 15px 80px;
        font-size: 14px;
	}


/*Left*/
	.modal.left.fade .modal-dialog{
		left: -320px;
		-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
		   -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
		     -o-transition: opacity 0.3s linear, left 0.3s ease-out;
		        transition: opacity 0.3s linear, left 0.3s ease-out;
	}
	
	.modal.left.fade.show .modal-dialog{
		left: 0;
	}
  
/**Hello----- bar**/
#hellobar {
    background-color:#fff;
    
}


#hellobar a {
    font-size:17px;
    color:#FF2D92;
    text-align: center;
    opacity: .95;
    padding: 18px 20px;
    margin-bottom: 0;
    display: block;
    font-weight: 600;
    border-bottom: 2px dashed; 
}
#hellobar a:hover {
    text-decoration: none;
    
    
}

#hellobar a span.hand-computer-icons {
    width: 24px;
    height: 24px;
    background-image: url("../img/hand-pointing-right-computer.png");
    background-repeat: no-repeat;
    background-position: right;  
    padding-right: 60px;
    
    
}

#hellobar span.fake-button {
    text-decoration: underline;
    
}
    


/* ----- MODAL STYLE ----- */
	.modal-content {
		border-radius: 0;
		border: none;
	}

	.modal-header {
		border-bottom-color: #EEEEEE;
        
	}

    .modal-header h4 {
        text-transform: none;
}

    .modal-body p a {
        color: #EE4477;
        
}

/*Media queries*/
@media (max-width: 320px) { 
    nav {
        margin-top: 8px !important;
    }
    
    
    #cities {
        margin-left:0px;
        display: block;
    }
    
    .hero-image {
        margin-top:56px !important;
    }
    
    .hook {
        margin-bottom: 30px !important;
    }
    
     h2.hook {
        font-size:36px !important;
    }
    
    a.cta {
        display: block;
        text-align: center;
        margin-bottom: 8px;
        
    }
}

@media (max-width: 575px) { 
    nav {
        margin-top: 8px !important;
    }
    
    #cities {
        margin-left:0px;
        display: block;
    }   
    
    .jumbotron-fluid {
    margin-bottom: 40px !important;
}
    
    
    a.cta {
        display: block;
        text-align: center;
        margin-bottom: 8px;
        padding: .9rem 1rem;
        
    }

    a.cta.secondary {
        margin-left:10px;
}   

    .hook {
        font-size:38px !important;    
        
    } 
    .hero-image {
        margin-top: 54px !important;    
    }
    
    a.city {
        font-size: 12px !important;    
    }
    
}

@media (max-width: 768px) { 
    a.city {
        font-size: 13px;
    }
    h2.hook {
        font-size:41px;
    }
    
    a.cta {
        font-size:12px;
    }
    
    .card-content-body h4 {
        font-size:21px !important;
    }
    
    .card-content-body p, ul, #footer span {
        font-size:13px !important;
    }
    
    .card-content-body .info-title span {
        font-size:10px;
    }
    
    .img.icon-contact {
        display: block;
    }
    
    
} 

@media (max-width: 1024px) { 

     .hero-image {
        margin-top:210px;
    }
    .hook {
        margin-bottom: 56px;
    }
    nav {
    margin: 32px 0 40px 0;
    }
}
Resources1×0.5×0.25×Rerun