/*========================
Tabbs Scroll
========================*/

#pathways .wrap .tab-scroll { background: #eeeeee; border-radius: 8px; padding:20px; float: left; width: 100%; margin-bottom: 20px; }
#pathways .wrap div { float: left; /*width: 100%;*/ margin-bottom: 10px; color: #fff; padding:5px;}

#pathways .pathway .image-wrap {padding:0;}

#pathways .tab-scroll a { margin-bottom:20px; background: #f00; position: relative;  display: block; border-radius: 10px; text-align: center;  font-size: 18px; min-height: 100px; padding: 16% 5%; color: #fff; }

#pathways .tab-scroll h2 {border:none;}

#pathways .tab-scroll .col a:after { font-size: 25px; content: '\f103'; font-family: fontAwesome; position: absolute; bottom: -15px; width: 100%; text-align: center; left: 0; right: 0; }
#pathways .tab-scroll .col a:before {content: ''; position: absolute; bottom: -20px; width: 0; height: 0; border-top: 20px solid #90c790; left: 50%; margin-left: -20px;  border-left: 20px solid transparent; border-right: 20px solid transparent;}


#pathways .tab-scroll .col:nth-child(1) a {background: url(../images/green-pattern.jpg); background-size: cover;}
#pathways .tab-scroll .col:nth-child(1) a:before {border-top: 20px solid #90c790;}
#pathways .tab-scroll .col:nth-child(2) a {background: url(../images/purple-pattern.jpg); background-size: cover;}
#pathways .tab-scroll .col:nth-child(2) a:before {border-top: 20px solid #8f73a6;}
#pathways .tab-scroll .col:nth-child(3) a {background: url(../images/pink-pattern.jpg); background-size: cover;}
#pathways .tab-scroll .col:nth-child(3) a:before {border-top: 20px solid #ee838f;}
#pathways .tab-scroll .col:nth-child(4) a {background: url(../images/turq-pattern.jpg); background-size: cover;}
#pathways .tab-scroll .col:nth-child(4) a:before {border-top: 20px solid #80bbc2;}
#pathways .tab-scroll .col:nth-child(5) a {background: url(../images/orange-pattern.jpg); background-size: cover;}
#pathways .tab-scroll .col:nth-child(5) a:before {border-top: 20px solid #f7a87f;}
#pathways .tab-scroll .col:nth-child(6) a {background: url(../images/blue-pattern.jpg); background-size: cover;}
#pathways .tab-scroll .col:nth-child(6) a:before {border-top: 20px solid #6d9fd5;}

.tab-scroll .section {width:100%;}

#pathways .pathway { border-radius: 8px; }
#pathways .pathway a { float: left; width: 100%; border-radius: 10px; margin-bottom:50px; }
#pathways .pathway a .image-wrap img { position: relative; }
#pathways .pathway a .image-wrap { float: left; width: 100%; margin-bottom: 0; position: relative; }
#pathways .pathway a .pathway-content { float: left; width: 100%; padding:20px; }
#pathways .pathway-content h2 {color: #fff;border:none; position: relative;}
#pathways .pathway-content h2:before {position: absolute; bottom: 0px; left: 0px; height: 3px; width: 80px; background: #fff; content:'';}

#pathways .pathway-content p {color: #fff;}
#pathways .button {background: #fff;}
.pathway-content .button p {padding:0; font-family: din_next;}

.pathway:nth-child(2) a { background: url(../images/green-background.jpg); background-size: cover; }
#pathways .pathway:nth-child(2) .pathway-content .button p {color: #90c790;}
.pathway:nth-child(3) a { background: url(../images/purple-background.jpg); background-size: cover; }
#pathways .pathway:nth-child(3) .pathway-content .button p {color: #8f73a6;}
.pathway:nth-child(4) a { background: url(../images/pink-background.jpg); background-size: cover; }
#pathways .pathway:nth-child(4) .pathway-content .button p {color: #ee838f;}
.pathway:nth-child(5) a { background: url(../images/turq-background.jpg); background-size: cover; }
#pathways .pathway:nth-child(5) .pathway-content .button p {color: #80bbc2;}
.pathway:nth-child(6) a { background: url(../images/orange-background.jpg); background-size: cover; }
#pathways .pathway:nth-child(6) .pathway-content .button p {color: #f7a87f;}
.pathway:nth-child(7) a { background: url(../images/blue-background.jpg); background-size: cover; }
#pathways .pathway:nth-child(7) .pathway-content .button p {color: #6d9fd5;}

#pathways .pathway a .pathway-content .button { width: auto; padding:10px; }
#pathways .pathway a:hover .pathway-content .button { opacity: 0.5; }

#pathways .pathway:nth-child(odd) .image-wrap {float: right; border-bottom-right-radius: 10px; border-top-right-radius: 10px;}
#pathways .pathway:nth-child(even) .image-wrap { border-bottom-left-radius: 10px; border-top-left-radius: 10px;}
#pathways .pathway:nth-child(even) .pathway-content {border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;}
#pathways .pathway:nth-child(odd) .pathway-content {border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}

#pathways .pathway a .image-wrap img {border-top-right-radius: 10px; border-top-left-radius: 10px; }

/* =======================================
 @ 600
======================================= */
@media only screen and (min-width: 600px) {

#pathways .wrap .pathway { width:49%; padding:1%; }
/*#pathways .pathway a .pathway-content { min-height: 436px; }*/

}






/* =======================================
 @ 771
======================================= */
@media only screen and (min-width: 771px) {

#pathways .wrap .pathway { width:100%; padding:0; }

#pathways .pathway a .image-wrap { width: 50%; overflow: hidden; }
#pathways .pathway a .image-wrap img { min-width: 688px; }
#pathways .pathway a .pathway-content {  width: 50%; padding:20px; }


.pathway:nth-child(3) .image-wrap { float: right; }
.pathway:nth-child(5) .image-wrap { float: right; }
.pathway:nth-child(7) .image-wrap { float: right; }



#pathways .pathway:nth-child(odd) .image-wrap { border-radius:0px; float: right; border-bottom-right-radius: 10px; border-top-right-radius: 10px;}
#pathways .pathway:nth-child(even) .image-wrap { border-radius:0px;  border-bottom-left-radius: 10px; border-top-left-radius: 10px;}
#pathways .pathway:nth-child(even) .pathway-content {border-radius:0px;  border-bottom-right-radius: 10px; border-top-right-radius: 10px;}
#pathways .pathway:nth-child(odd) .pathway-content {border-radius:0px;  border-bottom-left-radius: 10px; border-top-left-radius: 10px;}

#pathways .pathway a .image-wrap img {border-radius:0px; }

}



/* =======================================
 @ 1200
======================================= */
@media only screen and (min-width: 1200px) {

#pathways .pathway a .image-wrap img { min-width: auto; }
#pathways .pathway a .pathway-content { min-height: auto; }
#pathways .tab-scroll a {margin-bottom:0px;}
#pathways .wrap div {padding:0;}




}