/*!
Theme Name: Adventures In Bethel
Theme URI: http://underscores.me/
Author: Application of Knowledge
Author URI: http://appofknowledge.com
Description: A custom WordPress Theme Using Bootstrap4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: adventuresinbethel
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Adventures In Bethel is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/

/* Change default red a link to differnt color */
.navbar-nav > li.current_page_item a,
.navbar-nav > li.current_page_parent a, {
color: white
}



@media screen and (min-width: 37.5em) {
	.menu-toggle {
		display: none;
	}
	.main-navigation ul {
		display: block;
	}
}

.site-main .comment-navigation, .site-main
.posts-navigation, .site-main
.post-navigation {
	margin: 0 0 1.5em;
	overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	float: left;
	width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
	outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
	margin: 0 0 1.5em;
	/* Make sure select elements fit in widgets. */
}

.widget select {
	max-width: 100%;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
	display: block;
}

.hentry {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	/* Theme Footer (when set to scrolling) */
	display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-caption {
	display: block;
}



/* styles.css */

/* Global Color Scheme
///////////////////////


///////////////////////*/


/* Global CSS */
html,
body {
  height: 100%;
  padding-top: 0rem;
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    margin-top: 0rem;
    background-color: #ffffff;
}

/* bring top part of site down when logged into wordpress */ 
.logged-in .fixed-top {
	top:32px;

}

.fa-icon-innter-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    text-align: left;
}

img {
    max-width: 100%;
}

.section-content {
    padding: 1.5rem 0 0 0;
    overflow: hidden;
}

.parallax-window {
    background: transparent;
    padding: 6.5rem 0;
}

#header-image {
}

.feature-image {
  display: table;
  width: 100%;
}

.feature-image h1 {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: white;
}

.feature-image-default {
  background: url('/wp-content/themes/adventuresinbethel/assets/images/Children-Sun-BG.png') no-repeat;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  height: 11rem;
  background-color: #f7f7f7;
}

.main-raised {
    margin: 0rem 0rem 2rem;
    padding: 1rem 1rem 0rem;
    border-radius: 6px;
    box-shadow: 0 16px 24px 2px rgba(6, 234, 40, 0.14), 0 6px 30px 5px rgba(06, 234, 40, 0.12), 0 8px 10px -5px rgba(6, 234, 40, 0.2);
}

.img-raised {
    box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

.img-rounded {
  border-radius: 0.375rem;
}

.section-header-text {

}

.section-background-navy {
  background-color: #141f3d;
}

.section-background-gray {
  background-color: #f7f7f7;
}

.modal-content{
  background: url('/wp-content/themes/adventuresinbethel/assets/images/tile.jpg') top left repeat;
}

.modal-header h4 {
  font-size: 1.125rem;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.7;
  margin-top: 1.5rem;
}

/************************************************/

/*bootstrap 4 specific overrides */

/* bootstrap 4 list-group-item has border by default border: 1px solid rgba(0,0,0,.125);*/
/* need to modify the padding as well padding: .75rem 1.25rem; */

/*Carousel Modifications*/
.carousel-inner > carousel-item {
  height: 100vh;
}

.carousel-inner > carousel-item > img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-height: 500px;
  width: auto;
}

.carousel-control.left,
.carousel-control.right {
  background-image: none;
}

/*
Forces image to be 100% width and not max width of 100%
*/
.carousel-item .img-fluid {
  width:100%;
  height:100%;
}

/*
anchors are inline so you need ot make them block to go full width
*/
.carousel-item a {
  display: block;
  width:100%;
}

/* round the borders on the carosuel and hide the overflow: */
.carousel-inner {
    border-radius: 6px;
    background-color: rgba(0,0,0,0);
    overflow: hidden;
}

.carousel-caption
    {
      position: absolute;
      right: 0;
      left: 0;
      z-index: 10;
      padding-top: 20px;
      padding-bottom: 20px;
      color: #fff;
      text-align: center;
      background: rgba(0,0,0,0.5);
    }

/*Carousel Modifications*/



.list-group-item {
  border: 0px solid rgba(0,0,0,.125);
  padding: .25rem 1.25rem;
}

#nav-main li {
  flex: 1 0 auto;
}

#nav-main a {
  display: block;
  padding: .5em 1em;
  color: rgba(0,0,0,.5);
}

#nav-main a:hover {
  color: rgba(0,0,0,.9);
  text-decoration: none;
}


.navbar {
  border-top: 1px solid #3e4249;
  border-bottom: 1px solid #3e4249;
  box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 3px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
  padding: 0rem 1rem !important;
}

.main-navbar {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7),to(#eee));
  background-image: -webkit-linear-gradient(top, #f7f7f7 0%,#eee 100%);
  background-image: -o-linear-gradient(top, #f7f7f7 0%,#eee 100%);
  background-image: linear-gradient(to bottom, #f7f7f7 0%,#eee 100%);
}

.navbar-toggler {
  z-index: 9999;
  margin: .45rem;
}

.navbar .active a {
  
}

.nav-link
{
    color: #525f7f;
}
.nav-link:hover
{
    color: #5e72e4;
}
.nav-link i:not(.fa)
{
    position: relative;
    top: 2px;
}

.navbar-nav .nav-link
{
    font-family: 'Open Sans', sans-serif;
    font-size: .9rem;
    font-weight: 400;

    transition: all .15s linear;
    letter-spacing: 0;
    text-transform: normal;
}

.navbar-nav .nav-link .nav-link-inner--text
{
    margin-left: .25rem;
}

.navbar-expand-md .navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
}

.navbar-brand
{
    font-size: 1.25rem;
    line-height: inherit;
    display: inline-block;
    margin-right: 1rem;
    padding-top: .0625rem;
    padding-bottom: .0625rem;
    white-space: nowrap;
    letter-spacing: .05px;
    text-transform: uppercase;
    font-weight: 600;
}
.navbar-brand:hover,
.navbar-brand:focus
{
    text-decoration: none;
}

.navbar-nav .nav-item {
    margin-right: .5rem;
}

.navbar-nav .nav-link {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-radius: .25rem;
}

.bg-semi-transparent-white
{
    background-color: rgba(255,255,255,0.9);
}

.card {
  border-radius: 6px;
  margin: 2rem 1rem 2rem;
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

.card-text p {
  text-align: justify;
}

.card-title {
  text-align: center;
}
.card-subtitle li {
  float: none;
  text-align: center;
}

/* Custom CSS for Specific Pages
-------------------------------------------------- */

/* Home Page
-------------------------------------------------- */
/* Main marketing message and sign up button */

#cover {
  z-index: 9999;
}

/* Leadership Page
-------------------------------------------------- */

#team {
  padding-top: 1rem;
  padding-bottom: 2rem;
}

#team h2 {
  font-weight: normal;
}
#team h3{
  color: #e6001c;
}

#team p {
  padding: 0 1rem;
}

/* Center align the text within the
two columns below the featured image*/

#team .col-lg-6 {
  margin-bottom: 1.5rem;
  text-align: center;
}

#team .col-lg-6 p {
  margin-right: .75rem;
  margin-left: .75rem;
}

.team-member .name {
  text-align: center;
}

.team-member .title {
  text-align: center;
}

.team-member img {
  margin-top: 1rem;
}


/* Contract-Us Page
-------------------------------------------------- */
#contact-us {
  padding-top: 1rem;
  padding-bottom: 2rem;
}

/* Community-Service Page
-------------------------------------------------- */
#community-service h3.title {
  color: #e6001c;
  font-size: 1.5rem;
  text-align: center;
}

/* News Page
-------------------------------------------------- */
#news h3.title {
  color: #e6001c;
  font-size: 1.5rem;
  text-align: center;
}

#news a {
  color: #e6001c;
}

#news .section-header-text {
  padding-bottom: 0rem;
}

/* Clients Page
-------------------------------------------------- */
#clients h3.title {
  color: #e6001c;
  font-size: 1.5rem;
  text-align: center;
}

.government-img img {
  width: 90px;
}

/* ==== FORMS ==== */

label {
  display: block;
  font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  display: block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  padding: 6px 12px;
}


form.search-form .form-group {
  margin: 0;
}

form.search-form .input-group {
  width: 100%;
}

form.search-form .input-group input[type="search"],
form.search-form .input-group input[type="text"] {
  width: 70%;
}

form.search-form .input-group input[type="submit"] {
  width: 30%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  float: right;
}

form textarea {
  width: 100%;
  border: 1px solid #ccc;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

/* Main Footer
-------------------------------------------------- */
#main-footer {
  background: #3e4249;;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

#main-footer a {
  color: #6c5f73;
}

#main-footer .company-profile-footer {
  padding: 1rem 0;
}

#main-footer .company-profile-footer h6 {
  color: white;
  text-align: center;
  font-size: 1.15rem;
  float: top;
}

#main-footer .address {
  text-align: center;
}

#main-footer .address a {
  font-size: 1rem;
  color: white;
}

#main-footer .address a:hover {
  color: #5cb85c;;
}


#main-footer .phone {
  text-align: center;
}

#main-footer .phone a {
  font-size: 1rem;
  color: white;
  padding: 0.5rem 0;
}

#main-footer .phone a:hover {
  color: #5cb85c;;
}

#main-footer .email-btn {
  padding-top: 1rem;
}

.bg-info {
  background-color: #11cdef !important;
}

.footer-component {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.footer-component {
  color: white;
}

.social-media-table {
  display: table;
  height: 100%;
}

.social-icons {
  padding-top: .75rem;
}

.social-media-btn span {
  color: white;
}

.footer-component .profile-logo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.footer-component .row {
  vertical-align: middle;
}

.footer-component .middle {
  vertical-align: middle;
}

.footer-component .profile-logo img {
    width: 3.5rem;
    height: 3.5rem;
}


#copyright-bar {
  background-color: black;
  color: white;
  padding: .75rem 0;
  text-align: center;
  font-size: 0.8rem;
}

#copyright-bar a {
  color: white;
}

/* RESPONSIVE CSS
-------------------------------------------------- */

/* Bootstrap 4 Specific Break Points */

@media screen and (min-width : 991px) {

  .feature-content {
      display: flex;
      align-items: center;
  }
}

/* WordPress Specific Nav Header */
@media screeen and (max-width: 768) {
	.logged-in .fixed-top {
		top: 46px;
	}
}

/* WordPress Specific Nav Header */
@media screeen and (max-width: 782) {
	.logged-in .fixed-top {
		top: 46px;
	}
}

@media (min-width: 768px) {
  .navbar-nav {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  .navbar-nav .nav-item {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
  }
}


/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
  /* Remove the padding we set earlier */
  .masthead,
  .marketing,
  .footer {
    padding-right: 0;
    padding-left: 0;
  }
}


/*1 Column for Narrow Browser Windows (between 0 and 679 pixels) and Smartphones in both orientations. In this query we linearize all of the columns so that they stack vertically by setting float to none and width to auto. We also use this query to move the menu to the top of the layout and stack its links neatly in a vertical orientation. */
@media only screen and (min-width: 0px) and (max-width: 768px) {

  .feature-image-default-alt {
    background: url('../img/dc-tidal-basin-banner-alt.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    height: 11rem;
    background-color: #f7f7f7;
  }

  .main-raised {
      margin: 0rem 0rem 2rem;
      padding: 1rem 1rem 0rem;
      border-radius: 6px;
      box-shadow: 0 16px 24px 2px rgba(6, 234, 40, 0.14), 0 6px 30px 5px rgba(06, 234, 40, 0.12), 0 8px 10px -5px rgba(6, 234, 40, 0.2);
  }

  .card {
    margin: 2rem 0.17rem 2rem;;
  }

  .card-text p {
    text-align: left;
  }

  .card-deck {
    column-count: 1;
  }

  .social-mdia-btn {
    padding-top: .25rem;
  }

  .card-subtitle {
    text-align: center;
  }


  .government-img img {
    width: 150px;
  }
}

/*Exception rules for Smartphones in Landscape orientation only. When a smartphone is turned sideways, the text will appear larger so this query contains a single rule that reduces the font-size.*/
@media only screen and (max-device-width: 480px) and (orientation : landscape) {
}

/*2 Column with top spanning menu for Medium Browser Windows and Portrait Tablets. In this query we move the navigation to the top and stack the links. The sidebar and main content areas remain as columns. The interior 3-column structure inside the main content column is reflowed so that the third column drops below the first 2 and spans their width.*/
@media only screen and (min-width: 680px) and (max-width: 979px) and (orientation : portrait) {
}

/*Portrait Tablet Exceptions to adjust padding in content areas. In this query we include a simple exception rule to adjust the padding in all content areas to a value less than the default.*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}

/*Additional Rules for Medium Desktop Browser Windows and Landscape Tablets to reflow the inner 3-column structure. When a tablet is turned sideways there is ample room to display the menu as a column so all we want to do here is reflow the inner 3-column structure that is inside the main content column so that the third column drops below the first 2 and spans full width. This query also creates a breakpoint for desktop browsers when the window is between 680 and 979 pixels.*/
@media only screen and (min-width: 680px) and (max-width: 979px) and (orientation : landscape) {
}

/*Landscape Tablet Exceptions to adjust padding and reduce font size. When a tablet is turned sideways, the text will appear larger so this query contains rules that reduces the font-size and padding.*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}

/*3 Column for Medium-Wide Browser Windows. This query sets a breakpoint for medium wide windows (between 980 and 1420 pixels) and reflows the inner 3-column structure inside the main content column to drop the third column below the first 2.*/
@media only screen and (min-width: 980px) and (max-width: 1420px) {
}

/***********************************************/
/* media queries for common device breakpoints */
/***********************************************/

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */

  .navbar-toggler-right {
      position: inherit;
      right: 1rem;
      top: 1rem;
  }
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */

    .navbar-toggler-right {
      position: inherit;
      right: 1rem;
      top: 1rem;
  }

}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}