/*!
 * Dotal, Inc.
 * Copyright 2022
 */


/********* GENERAL ***********/
/*****************************/


/* STRUCTURE */

html {scroll-behavior: smooth;}

body, h1, h2, h4, h5, h6, h6 p, ul, li, a {font-family: 'Libre Franklin', sans-serif;	}

body {
    font-weight: 300;
    background-color: #FAFAFA;
 	margin-top: 160px;
    position: relative;
	}

section {
    padding-top: 160px;
    margin-top: -160px;
	}

.body-section {padding: 80px 0px;}

.body-section:last-of-type {padding-bottom: 180px;}

#home_top, #container_toptitle, #container_toptitle_color {margin-top: -80px;}

#container_toptitle {padding-bottom: 0px; margin-bottom: -20px;}

#container_toptitle_color.body-section {padding: 40px 0px;}
#container_toptitle_color.body-section h1 {padding-bottom: 10px;}
#container_category_top, #container_category {padding:20px 0px 0px;}

.section-gray {background: #E7E8E7;}

.section-blue {background: #3FD5EC;}

.hideme {display: none;}

/* FONTS */

h1, h1 span, h3, h3 span {font-family: 'Zilla Slab', serif;}

h1 {
    text-align: left;
    font-size: 56px;
   	font-weight: 300;
   	padding-bottom: 30px;
   	line-height: 1.1;
	}

h1 span.highlight {
   background-image: linear-gradient(#FFFF66, #FFFF66);
   background-repeat: no-repeat;
   background-position-y: 83%;
   background-size: 100% 1.125rem;
	}

h2 {
   font-size: 24px;
   font-weight: 800;
	}


h3, h3 span {
	font-size: 34px;
   	line-height: 1.2;
	margin-bottom: 20px;
	font-weight: 600;
	margin-top: 10px;
	}

h4 {
   	font-size: 20px;
   	font-weight: 700;
	margin-bottom: 20px;
	}

h5 {
   	font-family: 'Zilla Slab', serif;
   	font-size: 28px;
   	font-weight: 400;
	}

h6 {
   font-family: 'Libre Franklin', sans-serif;
   font-size: 16px;
   font-weight: 700;
   margin-bottom: 4px;
	}


p {font-size: 1rem; line-height: 1.7rem;}
.font-lg, .font-lg p {font-size: 1.2rem; line-height: 1.9rem}
p.font-sm {font-size: .8rem;}

b, strong {font-weight: 600;}

ul {
    margin-top: 10px;
    list-style: none;
	padding-left: 22px;
	}

ul li {
    padding-right: 30px;
    margin-bottom: 10px;
	}

ul li:last-of-type {margin-bottom: 20px;}

ul li:before {
  	content: '\2014';
  	position: absolute;
  	margin-left: -22px;
	}

ul li li:before {content: '\25A0';}

ul li li li:before {content: '\25CB';}

ol {padding-left: 15px;}

ol li {
    padding-bottom: 8px;
    padding-left: 10px;
	}

.underline:after {
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    width: 47%; /* Change this to whatever width you want. */
    padding-top: 3px; /* This creates some space between the element and the border. */
    border-bottom: 2px solid orange; /* This creates the border. Replace black with whatever color you want. */
	}


.underline-y, .underline-b, .underline-o, .underline-g, .underline-p, .underline-w  {
    background-position: bottom;
    background-size: 100% 10%;
    background-repeat: no-repeat;
    padding-bottom: 3px;
	}

.underline-y {background-image: linear-gradient(90deg, #FFFF66, #FFFF66);}
.underline-b {background-image: linear-gradient(90deg, #3FD5EC, #3FD5EC);}
.underline-o {background-image: linear-gradient(90deg, #FFC62B, #FFC62B);}
.underline-g {background-image: linear-gradient(90deg, #8EE268, #8EE268);}
.underline-p {background-image: linear-gradient(90deg, #FF8EE7, #FF8EE7);}
.underline-w {background-image: linear-gradient(90deg, #FFF, #FFF);}


/* LINKS & BUTTONS */


a {
    text-decoration: none;
    font-weight: 500;
    color: #000;
    }

a:hover {
    text-decoration: underline;
    color: #000;
    }

.btn {
	border: none;
	padding: 13px 25px;
	text-transform: uppercase;
	font-weight: 500;
	margin: 0;
	color: #FFF;
   	font-size: 12px;
    letter-spacing: 1px;
	}

.btn:hover {
    text-decoration: none;
    }

.btn-primary {margin-top: 30px;}

.btn-signup-ko {background-color: #FFFF66; color: #000;}

.btn-signup-ko:hover {background-color: #E7E8E7; color: #000;}

.btn-signup {background-color: #FFB81F; color: #000;}

.btn-signup:hover {background-color: #FFFF66; color: #000;}

.btn-blue {background-color: #3FD5EC;}

.btn-blue:hover {background-color: #6ADEF0;}

.btn-pink {background-color: #FF8EE7;}

.btn-pink:hover {background-color: #FFADED; color: #FFF;}

.btn-grey {background-color: #E7E8E7; color: #61636B;}

.btn-grey:hover {background-color: #F1F1F0; color: #61636B;}

.disabled {}

.btn-allbrands {
    color: #000;
    margin-bottom: 0;
    margin-top: 4px;
    text-decoration: none;
    }

.btn-allbrands:hover {
    background-color: #FFFF66; 
    text-decoration: none !important;
    }

.btn-allbrands, .tags {
    background-color: #E7E8E7;
    padding: 7px 18px;
    }

.tags {
	color: #61636B;
    margin: 0 5px;
    letter-spacing: .02rem;
    font-weight: 400;
	}

.section-gray .tags {background-color: #F1F1F0;}

.tags:hover {
   background-color: #FFFF66;
	}

a:hover {cursor: pointer;}

a.dotev, a.dotem {
    text-decoration: none;
    color: #000;
    position: relative!important;
    display: inline-block;
    z-index: 0;
    padding-left: 2px;
    padding-right: 2px;
	}

a.dotev::before {
  content: '';
  background-color: #FFD970;
  position: absolute;
  left: 0;
  width: 100%;
  z-index: -1;
  transition: all .2s ease-in-out;
  bottom: 3px;
  height: 7px;
}

a.dotev:hover::before {
  bottom: 2px;
  height: 6px;
  bottom: 0;
  height: 100%;
 }

a.dotem::before {
  content: '';
  background-color: #FFD970;
  position: absolute;
  left: 0;
  width: 100%;
  z-index: -1;
  transition: all .2s ease-in-out;
  bottom: 3px;
  height: 7px;
}

a.dotem:hover::before {
  bottom: 0;
  height: 100%;
 }

a.dotex, a.doted {
    text-decoration: none;
    border-bottom: dotted 1px #61636B;
    color: #000;
    font-weight: 300;
	display: inline;
	position: relative;
	}

a.dotex:hover, a.doted:hover {
    border-bottom: dotted 1px #AEAFB2;
    color: #AEAFB2;
}

a.dotex::after {
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 6 Pro";
    font: var(--fa-font-regular);
    content: "\f08e";
    padding-left: 5px;
    margin-right: 3px;
}

a.doted::after {
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 6 Pro";
    font: var(--fa-font-solid);
    content: "\e053";
    padding-left: 5px;
    margin-right: 3px;
    color: #FFB81F;
}

a.doted:hover::after {color: #D4D5D5;}

a.dotetip {
    text-decoration: none;
	border-bottom: dotted 1px #61636B;
    cursor: default;
    font-weight: 300;
    color: #000;
	position: relative;
	display: inline;
	}

a.dotetip:hover {cursor: pointer;}

a.dotetip:hover::after {color: #D4D5D5;}

a.dotetip::after {
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 6 Pro";
    font: var(--fa-font-solid);
    content: "\f05a";
    padding-left: 5px;
    margin-right: 3px;
    color: #FFB81F;
	}


/* FORMS */

.alert {
    margin-top: 5px;
    padding: 0.5rem 1rem;
}

.alert-danger {
    color: #FFF;
    background-color: #FF5656;
    border-color: #FF5656;
}

.alert-success {
    color: #FFF;
    background-color: #8EE268;
    border-color: #8EE268;
}

.alert-danger a {
    text-decoration: none;
    color: #FFF!important;
    font-weight: 600;
}

.alert-success a {
    text-decoration: none;
    color: #8EE268!important;
    font-weight: 600;
}

.alert a:hover {
    text-decoration: underline;
}

.alert i {
    margin-right: 5px;
}

.subscribe-i i {
    font-size: 1.2rem;
}

.subscribe-check .form-check-label {
    font-family: 'Zilla Slab', serif;
    font-size: 21px;
}



/* TOOL TIPS */

.tooltip {
    position:absolute;
    z-index:1020;
    display:block;
    visibility:visible;
    padding:8px;
    font-size:14px;
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 500;
    opacity:0;
    filter:alpha(opacity=0);
	}

.tooltip.in {
    opacity:1!important;
    filter:alpha(opacity=100)
	}

.tooltip.in, .tooltip-inner, .tooltip.show {opacity:1!important;}

.tooltip-inner {
    max-width:300px;
    padding:25px;
    color:#000;
    text-align:left;
    background: #FFFF66; 
	background:#FFD970;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    border-radius:0;
    opacity:1!important;
    filter:alpha(opacity=100);
	}

.tooltip-arrow {
    position:absolute;
    width:0;
    height:0;
	bottom:1px !important;
	}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #FFFF66;
	 border-top-color: #FFD970;
	}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #FFFF66;
	border-bottom-color: #FFD970;
	}

.tooltip.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: #FFFF66;
	border-left-color: #FFD970;
	}

.tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: #FFFF66;
	border-right-color: #FFD970;
	}


/* COLORS */

.yellow {color: #FFFF66;}
.blue {color: #3FD5EC;}
.orange {color: #FFB81F;}
.green {color: #8EE268;}
.pink {color: #FF8EE7;}

.orange-text {color: #F2A916;}
.blue-text {color: #04B5D0;}
.green-text {color: #6BCC2B;}

.greenbg {background: #8EE268;}

/* LOGO WRAPPERS */

.logo-wrapper {
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
    padding: 30px 30px;
	}

.logo-wrapper img {
    max-height:140px;
    max-width:100%;
	}

.logo-wrapper img {
    filter: brightness(0) saturate(100%);
	transition: 0.3s;
	}

.logo-wrapper a:hover img {filter: none;}

.logo-wrapper p {
	margin-top: 20px !important;
	font-weight: bold;
	color: #888;
}



/*********** NAVIGATION *****************/
/****************************************/



#nav-dotal, #nav-dotal a, #nav-dotal a:hover, .navbar-light .navbar-nav .nav-link, .nav-link {color: #000;}

#nav-dotal {
	margin-bottom: 50px;
	transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
	font-size: .9rem;
	}

nav {
    font-weight: 500;
    background-color: #FFF;
    min-height: 80px;
	}

nav li {list-style: none !important;}
nav li:before {content: none !important;}

nav a, nav a:hover {text-decoration: none !important;}

nav a:hover {text-decoration: underline !important;}

.nav-link i {
    margin-left: 5px;
    margin-right: 8px;
    font-size: 1.2rem;
	}

.nav-link {
    padding-left: 0px!important;
    padding-right: 13px;
	}

/* nav left */

#nav-left {padding-left: 30px;}

#nav-left li {padding-right: 15px; margin-bottom: 0;}

#nav-dotal ul, #nav-dotal li {margin: 0;}

#nav-left .nav-mega {width: 100%;}

#nav-left .nav-mega .dropdown {position: static;}

#nav-left .nav-mega .dropdown-menu.mega-menu {
    min-width: auto;
    width: 100%;
    margin-top: 0;
    padding: 40px 200px 80px;
    border-radius: 0;
    border: none;
    border-top: solid thin #D4D5D5;
    border-bottom: solid thin #D4D5D5;
	}

#nav-left .subnav ul {padding-left: 0;}

#nav-left .subnav h6 {margin-bottom: 10px;}

#nav-left .subnav a {
    font-size: 14px;
    font-weight: 400;
	}

#nav-left button {
    background: none;
    border: none;
    display: none;
	}

#nav-left .dropdown-toggle::after {display: none;}

/* logo */

#dotal-logo {
    background: url("/img/dotal_logo.svg") no-repeat center;
    background-size: contain;
	position: relative;
	}

#dotal-logo p {
    display: block;
	margin: 0px;
	padding: 0px;
	height: 45px;
}

#dotal-logo p a {
	text-indent: -1000px;
	overflow: hidden;
	height: 45px;
	display: block;
	}

/* nav right */

#nav-right {padding-right: 30px;}


#nav-right li {padding-right: 15px;}

#nav-right li.signin {
    padding-left: 20px;
    border-left: solid thin #D4D5D5;
	}

#nav-right button {
    background: none;
    border: none;
    display: none;
	}

#nav-right button i {
    font-size: 19px;
    color: #000;
	}

#nav-mobile, #search-mobile {display: none;}

.dropdown-menu[data-bs-popper] {
    right: 0!important;
    left: unset;
	}

.shrink .dropdown-menu::after {display: none;}






/******************* HOME PAGE ***********************/
/*****************************************************/


#home_container p {
    font-weight: 300;
	font-size: 1.15rem;
	}

#home_top {
    padding: 180px 0px 160px;
    background: #3FD5EC;
 	}

#home_top h1 {
    padding-bottom: 40px;
	font-weight: 400;
	text-align: left;
	}

#home_top p {text-align: left; margin-bottom: 40px; font-size: 22px; line-height: 2.2rem;}

#home_casestudies {padding:30px 0px;}

#home_casestudies {padding:50px 0px;}

#home_positioning .row {margin-bottom: 80px;}

.home-icon {border: solid 4px #F2A916;
display: inline-block;
  border-radius: 1000px;
 padding: 0.5em 0.65em;
	font-size: 45px;
}


.home-icon.blue-text {
	border-color: #04B5D0;
	padding: 0.65em 0.65em;
	font-size: 40px;
}

.home-icon.green-text {
	border-color: #6BCC2B;
	padding: 0.8em 0.7em;
	font-size: 35px;}

.position-content {padding-left: 50px !important;}




/******************* INDIVIDUAL BRAND PAGES  ***********************/
/*******************************************************************/

/* brand intro */
#container_history {
 	background-color: #3FD5EC;
	margin-top: -80px;
	margin-bottom: -80px;
	}

#container_history h1 {
   	text-align: left;
   	font-size: 72px;
   	padding-bottom: 15px;
	font-weight: 400;
	}

#brand-history_summary {
   	padding-right: 40px;
   	margin-bottom: 10px;
 	}

#brand-history_summary p {font-size: 1.15rem; line-height: 2rem;}

 #brand-history_sidebar {
   	padding-left: 40px;
   	border-left: solid thin #FFF;
 	}

#brand-history_sidebar h6, #brand-history_sidebar p {font-size: .85em;}

#brand-brand_logo {margin-bottom: 24px;}

#brand-brand_logo img {
    max-height: 50px;
    max-width: 100px;
	}


/* brand sticky nav */
 
.sticky-top {
    padding-top: 80px;
    padding-bottom: 20px;
	}

#brand-categories {
 	background-color: #3FD5EC;
 	padding: 15px 0px;
    min-height: 60px;
 	}

#brand-categories ul {
    
    text-transform: uppercase;
    margin-top: 5px;
    letter-spacing: 1.1px;
	margin-left: -30px;
}

#brand-categories ul li {padding: 0; margin: 0;}

#brand-categories li a {
   	padding:  0px 30px !important;
   	color: #000;
   	border-right:  solid 1px #000;
   	line-height: 10px;
	font-size: 14px;
	font-weight: 600;
	}

#brand-categories li a:hover {text-decoration: none !important;}

#brand-categories li:last-of-type a {border-right:  none;}

#brand-categories li a:after {
    display:block;
    content: '';
        position: relative;
        bottom: 0;
        height: 5px;
        width: 100%;
    border-bottom: solid 2px #FFF;  
    transform: scaleX(0);  
    transition: transform 250ms ease-in-out;
	}

.hidelogo {text-align: right;}

#brand-categories li a .lineunder, #brand-categories li .active #scroll-purpose, #brand-categories li .active #scroll-focus, #brand-categories li .active #scroll-culture, #brand-categories li .active #scroll-experience {border-bottom: solid 2px #FFF;}

#brand-categories li a .nolineunder {border-bottom: none;}

#brand-categories ul li a:hover:after {transform: scaleX(1); }

#brand-categories ul li a.fromleft:after {transform-origin:  0% 50%;}


/* dote section */

#container_category, #container_category_top {padding-top: 40px;}

#brand-category {
 	text-align: center;
 	padding-bottom: 40px;
 	}



#container_category_top {padding-top:50px;}


.page-section:last-of-type {
	padding-bottom: 100px;
}

.border-top {border-top: 2px solid #D4D5D5!important}

/* dote category */
#section-section_header {
    padding-left: 0;
    padding-right: 0;
	}

 #section-section_header h6 {
 	padding-top: 45px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 100px;
 }

 #section-section_header h6.sticky {
    position: sticky;
    top: 180px;
 }



/* purpose non-stick */ 
#container_category_top h4.sticky {
    position: static;
    top: 150px;
 	}


/* dote */

 #section-section_header_dotes {
	 padding-left: 25px;
	 padding-bottom: 20px;
	}

 #section-section_header_dotes .row {
	 padding-bottom: 30px;
	}

h3#dote-header span, h3#dote-header {
   	margin: 0;
	font-size: 34px;
   	margin-bottom: 20px;
   	font-weight: 400;
	padding-top: 40px;
	}

#section-section_header_dotes p,  #section-section_header_dotes li {
	font-size: 1.05rem;
	line-height: 1.8rem;
}


/* dote-tags */

#dote-tags {
 	margin-top: 30px;
}

#dote-tags .tags {
    margin-left: 0px; 
    margin-right: 10px;
    margin-bottom: 10px;
}


/* dote reference */

#dote-reference_text {
	margin-top: 20px;
	}

#dote-reference_text p, #dote-reference_text ul {
    line-height: 1rem;
}

 #dote-reference_text a {
    text-decoration: none;
    color: #61636B;
	font-weight: 400;
	font-size: 12px;
 	}

 #dote-reference_text a:hover {text-decoration: underline;}

 #dote-reference_text ul li {
    margin-bottom: 5px;
 }


/* dote save */

#dote-save {
    padding: 20px 12px;
    text-align: right;
	display: none;
	}

#dote-save i {
    font-size: 24px;
    color: #AEAFB2;
    padding: 10px 0px;
 	}

 #dote-save i:hover, #dote-save .orange {
    color: #FFB81F;
	cursor: pointer;
 	}

h3 .highlight.saved {
    background-image: linear-gradient(90deg, #FFD970, #FFD970);
    background-size: 100% 18%;
    background-repeat: no-repeat;
    background-position-y: 90%;
}



/************************* CATEGORY SECTION *********************/
/****************************************************************/

#container_toptitle_color.shrink {
    padding: 110px 200px 20px;
    transition: all 0.5s linear;
 	}

#container_toptitle_color.shrink h6, #container_toptitle_color.shrink p {display: none;}

#container_toptitle_color.shrink h1 {
    font-size: 42px;
    transition: font-size 0.5s linear;
 	}

#container_toptitle_color h1, #container_toptitle h1 {text-align: center !important; font-weight: 400;}

#container_toptitle p {margin-top: -20px;}

#section-section_header h4 a {display: block; text-align: center; padding-top: 40px; padding-bottom: 100px;}

#section-section_header h4 img {
    max-height:40px;
	max-width: 70%;
 	}

#container_category_top.category h4.sticky {
   	position: sticky;
   	top: 240px;
 	}



/************************* MY DOTES  ******************************/
/****************************************************************/


/* dote collapse */

#dote-collapse {
    padding: 20px 12px;
    text-align: right;
    }

#dote-collapse .btn {
    padding: 10px 0px;
    }

#dote-collapse .btn:focus {
    outline: none;
    box-shadow: none;
    } 

 #dote-collapse i {
    font-size: 24px;
    color: #AEAFB2;
    }

 #dote-collapse i:hover {
    color: #FFB81F;
    cursor: pointer;
    }

/* dote remove */

#dote-remove {
    padding: 20px 12px;
    text-align: right;
    }

#dote-remove i {
    font-size: 24px;
    color: #AEAFB2;
    padding: 10px 0px;
    }

 #dote-remove i:hover {
    color: #FFB81F;
    cursor: pointer;
    }

/* logos */

#mydotes-brand_logo {
    padding: 20px 0;
}

#mydotes-brand_logo img {
    max-height: 50px;
    max-width: 100px;
}

#mydotes-brand2 h2.sticky {
    position: sticky;
    top: 380px;
}


/************************* MODAL  ******************************/
/***************************************************************/


.modal-header {
	padding: 20px 50px;
}

.modal-body {
	padding: 30px 50px 75px 50px;
}



.modal-title {font-weight: 500; line-height: 1.2;}

@media only screen and (max-width: 992px) {
	
	.modal-dialog {
		max-width: 80% !important;
	}
}



/************************* SUBSCRIBE  ******************************/
/****************************************************************/

ul.startexploring li:before {
    content: none;
    margin-left: ;
}

ul.startexploring li {
    margin-left: -22px;
}

ul.startexploring li a {
    text-decoration: none;
    color: #000;
    font-weight: 400;
}

ul.startexploring li a:hover {
    text-decoration: underline;
    color: #000;
}

#exploreoptions i {
    font-size: 50px;
}

#exploreoptions .border-bottom {
    border-bottom: 2px solid #D4D5D5!important;
}


/************************* MY ACCOUNT  **************************/
/****************************************************************/

#myaccount .card-header, #myaccount-e .card-header {
    padding: 0rem 1rem 0.5rem ;
    margin-bottom: 0;
    background-color: #FFF;
    border-bottom: none;
}

#myaccount-e .border-start-0 input {
    margin-bottom: 10px;
}

#myaccount-e i {
    font-size: 1.2rem;
    line-height: 1rem;
    margin-bottom: 0;
}

#myaccount .card-footer, #myaccount-e .card-footer  {
    padding: 0rem 1rem 0.5rem ;
    background-color: #FFF;
    border-top: none;
}

#acc-mydotes {
    padding-top: 0;
}

#acc-mydotes h4 {
    margin-bottom: 0;
}


/************************* FOOTER  ******************************/
/****************************************************************/


#container_footer {
    background-color: #D4D5D5;
    margin-left: 0;;
	margin-right: 0;
	padding-bottom: 30px;
    /*margin-top: 50px;*/
 }

#container_footer ul {list-style: none;}

#container_footer li {list-style: none;}
#container_footer li:before {content: none;}

#container_footer a {
    text-decoration: none;
	color: #000;
 	}

#container_footer ul li a {
    font-weight: 500;
    font-size: .9rem;
 	}

 #container_footer a:hover {text-decoration: underline;}


/* footer form */

#mc_embed_signup_scroll {margin-top: 30px;}

.mc-field-group {
	padding: 0;
	margin: 0;	
	width: 100%;
	}

#container_footer .mc-field-group input[type="text"], #container_footer .mc-field-group input[type="email"] {
	margin:0;
	border-radius: 30px;
	border: none;
	padding: 10px 20px;
	margin-right: 15px;
	width: 100%;
	margin-bottom: 20px;
	}

#footer-legal {margin-top: 30px;}

#footer-social {text-align: right;}

#footer-social i {
    color: #FFF;
    font-size: 1.2rem;
    margin-right: 10px;
	}

#footer-social i:hover {color: #FFFF66;}


/***************************** RESPONSIVE ELEMENTS ****************************/
/******************************************************************************/

@media only screen and (max-width: 1270px) {

    .body-section, #container_toptitle_color.body-section {padding: 50px 0px;}
	#brand-categories, #container_category_top {}
	#container_toptitle_color.shrink {padding-top: 110px; padding-bottom: 20px}
	
	#home_pillars .card-outer {margin-bottom: 30px;}
	#home_pillars {margin-bottom: -30px;}
	
	}


@media only screen and (max-width: 992px) {

    .body-section, #container_toptitle_color.body-section {padding: 50px 0px;}
	#container_toptitle_color.shrink {padding-top: 110px; padding-bottom: 20px}
	#nav-left button, #nav-right button {display: block;}
	
	#nav-right li, #nav-right li.signin {
        padding-right: 0;
        padding-left: 0;
    	}

	#nav-right li.signin {border-left: none;}
	
	#nav-left .subnav {padding-bottom: 20px;}

	#navbarSearchDropdown ul.list-group-horizontal {
        display: block;
        text-align: center;
        padding: 30px 0 ;
    	}

    #navbarSearchDropdown {
        position: fixed;
        background-color: #FFF;
        top: 80px;
        left: 0;
        width: 100%;
        border-top: solid thin #D4D5D5;
        border-bottom: solid thin #D4D5D5;
    	}

    #nav-dotal.shrink #navbarSearchDropdown {top: 55px;}

    #navbarNavDropdown ul.list-group-horizontal {
        display: block;
        padding-bottom: 50px;
        text-align: center;
    	}

    #navbarNavDropdown {
        position: fixed;
        background-color: #FFF;
        top: 80px;
        left: 0;
        width: 100%;
        border-top: solid thin #D4D5D5;
        border-bottom: solid thin #D4D5D5;
    	}

    #nav-dotal.shrink #navbarNavDropdown {top: 55px;}

    #navbarNavDropdown ul {padding-top: 30px;}

    #navbarNavDropdown i {display: none;}

    #nav-left .nav-mega .dropdown-menu.mega-menu {
        padding: 10px 40px 20px;
        border-top: none;
        border-bottom: none;
    	}

    #nav-left li {padding-right: 0;}  

    #nav-mobile {
        display: block;
        border-top: solid thin #D4D5D5;
        text-align: center;
        padding: 20px 0;
    }

    #search-mobile {
        display: block;
        border-top: solid thin #D4D5D5;
        text-align: center;
        padding: 20px 0;
    }

    #nav-left .allbrands, #nav-left #navbarSearchDropdown i  {display: none;}

    #nav-left #navbarSearchDropdown .dropdown-menu {display: block;}

    #nav-dotal #nav-mobile .nav-link {
        font-size: 14px;
        font-weight: 600;
        padding-top: 10px;
    	}

    #nav-dotal .nav-link {
        font-size: 27px;
        font-weight: 300;
        padding-bottom: 30px;
    	}
	
	#nav-dotal .nav-link:hover {
		text-decoration: none !important;
		cursor: default;
		}
	
	#nav-dotal .allbrandsbtn {background-color: #FF8EE7; color: #fff;}
	#nav-dotal .allbrandsbtn:hover {background-color:  #ff66de; color: #fff; }
	
}




@media only screen and (max-width: 768px) {
    
   
	#home_top {padding: 90px 0px 100px;}

	#home_top h1 {padding-bottom: 20px; font-size: 50px;}

	#home_top p {margin-bottom: 20px; font-size: 20px; line-height: 2rem;}

	#home_positioning .row {margin-bottom: 80px;}

	.position-icon {text-align: center; margin-bottom: 20px;}

	.position-content {padding: 0px 15px !important;}
	
	.body-section:last-of-type {padding-bottom: 120px;}
	.btn-primary {
		margin-top: 40px;
	    border: none;
		padding: 10px 25px;
		font-size: 15px;}
	
	
	#brand-history_sidebar {
       padding-left: 10px;
       padding-top: 30px;
       border-top: solid thin #FFF;
       border-left: none;
    }
	
	#container_history h1 {font-size: 66px;}
	
	#footer-top {text-align: center;}
	
	#container_footer .mc-field-group input[type="text"], #container_footer .mc-field-group input[type="email"] {
		width: 80%;
		margin-bottom: 20px;
		text-align: center;
		}
	
	#footer-contact {margin-bottom: 50px;}
	
	 #brand-categories {
        padding: 10px 0px;
    }

   
    #section-section_header h6 {
        padding-left: 0px;
    }

    #brand-categories ul {
        margin-left: -40px;
    }


}

@media only screen and (max-width: 576px) {
    
	.container {padding: 0 30px;}
	
	

	
	#searchbar input {display: none;}
	
	#brand-categories ul {margin-left: -15px;}
	
	#brand-categories li a {
        padding: 0px 15px !important;
        font-size: 12px;
    	}
	
	.navbar-nav {flex-direction: row;}
	
	 #container_footer #social {flex-direction: row;}

    #footer-social {text-align: center;}

    #nav-mobile {
        display: block;
        border-top: 1px solid #D4D5D5;
    	}

    #navbarNavDropdown br {display: none;}

    #navbarNavDropdown ul {padding-top: 30px;}

    #navbarNavDropdown ul li a {font-weight: 300;}



#footer-legal {text-align: center;}

}




/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}