/*
Theme Name: The Chloe Grpup
Theme URI: http://www.thechloegroup.com
Author: Brian Murray
Author URI: http://www.b2284.com/
Description: The 2018 theme for Ysabel was based off of an approved design and is fully responsive to fit any size screen from large 4k monitors down to mobile devices.
Version: 1.0
Tags: modern, minimalistic, light, responsive, password protected

*/

/* ==========================================================================
   								Page Styles
   ========================================================================== */

/* ==== FONTS ==== */
@font-face {
    font-family: 'Proxima Nova';
    src: url('css/fonts/ProximaNova-Black.eot');
    src: url('css/fonts/ProximaNova-Black.eot?#iefix') format('embedded-opentype'),
        url('css/fonts/ProximaNova-Black.woff2') format('woff2'),
        url('css/fonts/ProximaNova-Black.woff') format('woff'),
        url('css/fonts/ProximaNova-Black.svg#ProximaNova-Black') format('svg');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Proxima Nova';
    src: url('css/fonts/ProximaNova-Bold.eot');
    src: url('css/fonts/ProximaNova-Bold.eot?#iefix') format('embedded-opentype'),
        url('css/fonts/ProximaNova-Bold.woff2') format('woff2'),
        url('css/fonts/ProximaNova-Bold.woff') format('woff'),
        url('css/fonts/ProximaNova-Bold.svg#ProximaNova-Bold') format('svg');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Proxima Nova';
    src: url('css/fonts/ProximaNova-Semibold.eot');
    src: url('css/fonts/ProximaNova-Semibold.eot?#iefix') format('embedded-opentype'),
        url('css/fonts/ProximaNova-Semibold.woff2') format('woff2'),
        url('css/fonts/ProximaNova-Semibold.woff') format('woff'),
        url('css/fonts/ProximaNova-Semibold.svg#ProximaNova-Semibold') format('svg');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Proxima Nova';
    src: url('css/fonts/ProximaNova-Regular.eot');
    src: url('css/fonts/ProximaNova-Regular.eot?#iefix') format('embedded-opentype'),
        url('css/fonts/ProximaNova-Regular.woff2') format('woff2'),
        url('css/fonts/ProximaNova-Regular.woff') format('woff'),
        url('css/fonts/ProximaNova-Regular.svg#ProximaNova-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Proxima Nova';
    src: url('css/fonts/ProximaNova-Light.eot');
    src: url('css/fonts/ProximaNova-Light.eot?#iefix') format('embedded-opentype'),
        url('css/fonts/ProximaNova-Light.woff2') format('woff2'),
        url('css/fonts/ProximaNova-Light.woff') format('woff'),
        url('css/fonts/ProximaNova-Light.svg#ProximaNova-Light') format('svg');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Bodoni';
    src: url('css/fonts/BodoniBT-BookItalic.eot');
    src: url('css/fonts/BodoniBT-BookItalic.eot?#iefix') format('embedded-opentype'),
        url('css/fonts/BodoniBT-BookItalic.woff2') format('woff2'),
        url('css/fonts/BodoniBT-BookItalic.woff') format('woff'),
        url('css/fonts/BodoniBT-BookItalic.svg#BodoniBT-BookItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

/* ==== GRID SYSTEM ==== */
.container, #infoModal .container {
    width: 100%;
    margin-left: auto;
    margin-right: auto
}
#infoModal .container {
    width: 90%;
    margin-left: auto;
    margin-right: auto
}
#infoModal .col-12{
    width: 100%
}
.row {
    position: relative;
    width: 100%
}

.row [class^=col]{
    float: left;
    margin: .5rem 10%;
    min-height: .125rem
}
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9 {
    width: 80%;
}
.col-1-sm {
    width: 4.33%
}
.col-2-sm {
    width: 12.66%
}
.col-3-sm {
    width: 21%
}
.col-4-sm {
    width: 29.33%
}
.col-5-sm {
    width: 37.66%
}
.col-6-sm {
    width: 46%
}
.col-7-sm {
    width: 54.33%
}
.col-8-sm {
    width: 62.66%
}
.col-9-sm {
    width: 71%
}
.col-10-sm {
    width: 79.33%
}
.col-11-sm {
    width: 87.66%
}
.col-12-sm {
    width: 100%
}
.row::after {
    content: "";
    display: table;
    clear: both
}
.hidden-sm {
    display: none !important;
}

/* ==== HEALPER CLASSES ==== */
.caps {
    text-transform: uppercase;
}
.lower {
    text-transform: lowercase;
}
.thin {
	font-weight: 200;
}
.margin10 {
	margin-top: 10px;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.fltLeft {
    float: none;
    display: block;
}
.fltRight {
    float: none;
    display: block;
}
.img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.rel {
    position: relative;
}

/* ==== PAGE STRUCTURE ==== */
body {
	padding-top: 70px;
    color: #000;
    font-family:'Proxima Nova';
    font-size: 12px;
    background: #fcf6ea url(images/texture_mobile.jpg) repeat;
}
h1 {
    color: #000;
    font-weight: 900;
    font-size: 50px;
    position: relative;
    text-transform: uppercase;
}
h2 {
    font-weight: 900;
    font-size: 25px;
	margin: 0;
    line-height: 1;
    letter-spacing: 5px;
    text-transform: uppercase;
}
h3 {
    font-weight: 900;
    font-size: 20px;
    letter-spacing: 5px;
    margin: 0 0 2em;
    text-transform: uppercase;
}
strong {
    font-weight: 700;
	letter-spacing: 3px;
}
section {
	padding: 2em 0;
    text-align: center;
}
p {
    margin: 0 0 1em;
	line-height: 1.75;
}
a, a:focus, a:active {
    text-decoration: none;
    color: #000;
}
hr {
	margin: 1em 0;
}
ul, li, ol {
	margin: 0;
	padding: 0;
}
.form-control {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.btn {
	color: #333;
    background-color: #fff;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid #BABABA;
    border-radius: 4px;
}
.btn:hover, .btn:active {
    background-color: #f3f3f3;
    border-color: #aaaaaa;
}
.btn:active {
	outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}
#logoContainer{
	background: #fff;
	position: fixed;
	z-index: 100;
	max-width: 100%;
	padding-bottom: .25em;
    top: 0;
}
.logo {
    max-width: 75%;
}
.hero {
    position: relative;
}
.button, .button:hover, .link {
    display: inline-block;
    font-weight: 700;
    margin: .5em 0;
    padding: 1em 1.25em;
    letter-spacing: 3px;
    text-transform: uppercase;
    border: solid 1px #000;
    text-decoration: none;
}
.link {
    text-align: center;
}
.texture {
/*	background-color: #fcf6ea;*/
	padding: 2em 0;
}
#topBtn {
	display: none;
}
footer {
    font-size: 10px;
    background: none;
    border-top: solid 1px #000;
    padding: .5em 0;
}
footer strong {
    letter-spacing: normal;
}
footer a {
    display: inline-block;
}
footer .row [class^=col] {
    margin: .5rem 2%;
}
#infoModal{
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    bottom: 0;
    background: #fcf6ea url(images/texture_mobile.jpg) repeat;
    z-index: 5;
    padding: 1em 0;
}
#mask {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.25)
}
#modalLoader{
    height: 500px;
}
#closeBtn {
    display: block;
    background: url(images/controls.png);
    background-size: contain;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 15px;
    height: 15px;
    z-index: 8;
}

/* ==== HEADER NAV BURGER ==== */
#menuToggle {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    padding: .75em .75em;
}
#menuToggle > ul {
	text-transform: capitalize;
	margin: 0;
    padding: 3em 25%;
    height: calc(100% - 6em);
	z-index: 2;
	right: 0;
	left: 0;
	top: 0;
    background: #f3ecdc;
    background-size: 85%;
	list-style-type: none;
    overflow: auto;
	-webkit-font-smoothing: antialiased;
	position: fixed;
	transform-origin: 0% 0%;
	transform: translate(-100%, 0);
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menuToggle #menuCheck:checked ~ ul{
  transform: none;
}
#menuToggle li {
    display: block;
    float: none;
    margin: 1em 0;
    letter-spacing: 3px;
    text-transform: uppercase;
        text-align: center;
}
#menuToggle li hr {
    width: 75%;
	display: inline-block;
    margin: 10px 0;
}
#menuToggle li li {
    font-weight: 700;
}
#menuToggle li li li {
    font-weight: normal;
}
#menuToggle li:first-of-type {
    border: none;
}
#menuToggle li a, #menuToggle li a:visited {
    text-decoration: none;
    text-transform: uppercase;
    color: #010101;
}
#menuToggle input{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0;
  z-index: 5;
  -webkit-touch-callout: none;
}
#menuToggle span{
  display: block;
  width: 23px;
  height: 1px;
  margin-bottom: 5px;
  position: relative;
  background: #5a5a5a;
  border-radius: 3px;
  z-index: 3;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}
#menuToggle span:first-child{
  transform-origin: 0% 0%;
}
#menuToggle span:last-child{
  transform-origin: 0% 100%;
}
#menuToggle #menuCheck:checked ~ span{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}
#menuToggle #menuCheck:checked ~ span:nth-last-child(2){
  transform: rotate(-45deg) translate(-2px, 1px);
}
/* ==== SLIDER ==== */
.modalSlider {
    padding: 0 2em;
}
.slider {
	width: 100%;
	margin: 0 auto;
}
.slider li p {
    margin-top: 1em;
    letter-spacing: 3px;
    font-size: 14px;
    font-weight: 300;
    text-align: center;
    text-transform: uppercase;
}
.slider li p b {
    font-weight: 700;
}
.slider li p span {
    display: block;
    margin-top: .5em;
    font-size: 10px;
}
.slider ul {
	overflow: auto;
	margin: 0;
	padding: 0;
	position: relative;
}
.unslider-wrap {
	position: relative;
}
.slider ul > li {
	float: left;
}
.slider li.unslider-active {
	z-index: 10;
}
.slider li,
.slider ol,
.slider ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}
.unslider-nav ol {
	list-style: none;
	text-align: center;
}
.unslider-nav ol li {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 4px;
	background: transparent;
	border-radius: 5px;
	overflow: hidden;
	text-indent: -999em;
	border: 1px solid #000;
	cursor: pointer;
}
.unslider-nav ol li.unslider-active {
	background: #333;
	cursor: default;
}
.unslider-nav {
	position: relative;
	bottom: 1.5em;
}
.slide-arrow {
	position: absolute;
	z-index: 2;
	cursor: pointer;
	padding: 2em;
	top: calc(50% - 3em);
	left: 0;
}
.slide-arrow:before {
	content: "\02C2";
	color: #000;
	font-weight: bold;
	font-size: 30px;
}
.slide-arrow.next, .slide-arrow.mobileNext {
	right: 0;
    left: inherit;
}
.slide-arrow.next:before, .slide-arrow.mobileNext:before {
	content: "\02C3";
}
.mobileSlider {
	margin-bottom: 1em;
}
.mobileSlider ul, .mobileSlider li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.slide-arrow.mobilePrev, .slide-arrow.mobileNext {
	padding: 0;
	top: calc(50% - 18px);
}
/* lightbox slider */
.info .slide-arrow{
	padding: 0;
	top: calc(50% - 18px);
}
.info .row [class^=col] {
	margin: .5rem 0;
}
.info .img-responsive {
	display: inline;
}
.modalBody {
    height: calc( 50vh - 10px);
    overflow-y: scroll;
    text-align: center;
}
.headerContact.logged-in {
    margin: 2em auto 0;
}
.headerContact {
    margin: 60% auto 0;
}
.headerContact p {
    font-family: 'Bodoni';
    font-size: 1.15em;
    letter-spacing: 2px;
    margin: 0;
    line-height: 1;
}
#loginForm {
    position: absolute;
    bottom: 0;
}

/* ==== RESPONSIVE BREAKPOINTS (mobile first) ==== */
@media only screen and (min-width: 540px) {
    /* 540px */
    .container {
		max-width: 98%;
	}
	.row {
		width: 100%
	}
	.row [class^=col] {
		margin: .5rem 2%;
	}
    .col-6.center, .col-4.center{
        float: none;
        margin: .5rem auto;
    }
    .hidden-lg {
        display: block;
    }
    .hidden-md {
        display: none;
    }
    footer strong {
        letter-spacing: 2px;
    }
    .modalBody {
        height: auto;
        overflow-y: auto;
        text-align: left;
    }
    .headerContact {
        margin: 18% auto 0;
    }
    .headerContact p {
        font-size: 2.25em;
    }
}
@media only screen and (min-width: 720px) {
    /* 720px */
    body {
		padding-top: 100px;
        font-size: 14px;
        background: #fcf6ea url(images/texture.jpg) repeat;
    }
    .modalBody h2{
        margin: .25em 0 .5em 0;
        font-size: 40px;
        letter-spacing: 7px;
    }
    #imageSlider .img-responsive {
        width: 100%;
    }
	h3 {
		margin: 0;
	}
	p {
        font-size: 16px;
	}
    .text-right {
        text-align: right;
    }
    .fltLeft {
        float: left;
    }
    .hidden-lg {
        display: none;
    }
    .hidden-sm {
        display: block !important;
    }
    .row [class^=col].fltRight {
        float: right;
    }
    .link, .link:hover, .link:active, .link:focus {
        position: relative;
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        display: block;
        display: inline-block;
        margin: 2em 3em 0 0;
        border: none;
    }
    .link:before {
        content: "";
        position: absolute;
		top: -.5em;
		left: 0;
        display: block;
        width: 30px;
        border-bottom: solid 1px #000;
    }
    .link:hover, .link:active, .link:focus {
        text-decoration: underline;
    }
	 #infoModal{
        background: #fcf6ea url(images/texture.jpg) repeat;
        top: 15%;
        box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.25);
        height: 70%;
        overflow-y: auto;
        border: solid #a79e87 1px;
 }
    #menuToggle {
        margin: 6em 0 3em;
        position: static;
		padding: 0;
        width: 100%;
		border: none;
        float: left;
        top: inherit;
        left: inherit;
    }
    #menuToggle span, #menuToggle input {
        display: none;
    }
    #menuToggle ul {
        width: auto;
		background: transparent;
		padding: 0;
		margin: 0;
        top: inherit;
        bottom: inherit;
        left: inherit;
        overflow: inherit;
		border: none;
		transform: none;
        position: relative;
        text-align: center;
    }
    #menuToggle li, #menuToggle li.hidden-sm{
        cursor: pointer;
        list-style: none;
        text-transform: uppercase;
        display: inline-block !important;
        margin: 0 30px;
    }
    #menuToggle li.hidden-lg {
        display: none !important;
    }
    #menuToggle li::before{
        transition: opacity .25s ease-in;
        -moz-transition: opacity .25s ease-in;
        -webkit-transition: opacity .25s ease-in;
        opacity: 0;
        display: block;
        position: relative;
        z-index: 5;
        margin: 0 auto;
        top: -3px;
        content: "\25bc";
    }
    #menuToggle li.active::before {
        opacity: 1;
    }
    #menuToggle li a,#menuToggle li a[data-target], #gvfb > ul > li:last-child a{
        text-decoration: none;
    }  
    #menuToggle li ul{
        margin: 0;
        padding: 0;
        position: absolute;
        display: none;
        width: 100%;
        top: -50px;
        left: 0;
        background: #fcf6ea;
        border-bottom: solid 1px #000;
    }
    #menuToggle li ul li{
        padding: 0 1em 1em;
    }
    #menuToggle li ul li ul{
        border: none;
        top: -3em;
    }
    #menuToggle li ul li ul li, #menuToggle li ul li ul li:hover {
        font-weight: normal;
    }
	#closeBtn {
		width: 25px;
		height: 25px;
        position: fixed;
		top: 16%;
		right: 2%;
	}
	#topBtn {
		display: none;
		position: fixed;
		bottom: 20px;
		right: 30px;
		z-index: 99;
		color: #fff;
		cursor: pointer;
		padding: 1em; 
		font-weight: bold;
		font-size: 16px;
		border-radius: 10px;
		border: 1px solid #fff;
		text-decoration: none;
		background-color: rgba(0,0,0,.5);
		-webkit-transition: background-color 500ms ease;
		-ms-transition: background-color 500ms ease;
		transition: background-color 500ms ease;
	}
	#topBtn:hover {
		background-color: rgba(0,0,0,.75);
	}
	#topBtn:before {
		display: block;
		width: 20px;
		height: 20px;
		content: "";
		background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='44px' height='44px' viewBox='0 0 44 44' enable-background='new 0 0 44 44' xml:space='preserve'%3E%3Cpath fill='white' d='M29.121,19.55l-6.29-6.196c-0.025-0.025-0.053-0.049-0.082-0.071c-0.012-0.011-0.024-0.02-0.038-0.03c-0.016-0.011-0.031-0.024-0.048-0.034c-0.017-0.011-0.032-0.02-0.048-0.03c-0.015-0.009-0.029-0.018-0.044-0.025c-0.017-0.009-0.034-0.017-0.051-0.024c-0.016-0.008-0.031-0.015-0.047-0.022c-0.016-0.006-0.033-0.012-0.049-0.018c-0.018-0.005-0.035-0.014-0.053-0.019c-0.017-0.005-0.034-0.008-0.05-0.013c-0.018-0.005-0.036-0.009-0.054-0.013c-0.02-0.003-0.039-0.006-0.059-0.008c-0.016-0.003-0.032-0.005-0.049-0.007c-0.073-0.007-0.146-0.007-0.218,0c-0.017,0.002-0.033,0.005-0.05,0.008c-0.02,0.002-0.038,0.005-0.058,0.009c-0.019,0.003-0.037,0.009-0.055,0.013c-0.016,0.005-0.033,0.008-0.05,0.013c-0.017,0.005-0.035,0.012-0.052,0.018c-0.017,0.006-0.033,0.012-0.049,0.019c-0.017,0.006-0.032,0.014-0.048,0.021c-0.017,0.008-0.034,0.016-0.051,0.024c-0.015,0.008-0.029,0.018-0.044,0.026c-0.015,0.008-0.031,0.018-0.048,0.029c-0.016,0.01-0.031,0.022-0.047,0.034c-0.014,0.01-0.027,0.019-0.04,0.028c-0.042,0.035-0.08,0.073-0.117,0.113c-0.013,0.011-0.026,0.021-0.037,0.033l-6.313,6.219c-0.433,0.428-0.434,1.12-0.003,1.544c0.432,0.426,1.131,0.424,1.564-0.002l4.495-4.426l-0.023,14.11c-0.001,0.603,0.493,1.092,1.104,1.09s1.107-0.49,1.109-1.095l0.023-14.108l4.403,4.334c0.432,0.426,1.133,0.424,1.565-0.003S29.553,19.975,29.121,19.55'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center center;
	}
    footer {
        padding: 2em 0;
        font-size: 12px;
    }
    footer span {
        display: block;
    }
    footer a {
        margin: 0 0 0 1em;
    }
    #infoModal .container {
        max-width: 1000px;
        position: relative;
    }
    .modalBody {
        text-align: left;
    }
    .modalBody p, .modalBody a, .modalBody a.link, .modalBody a.link:hover {
        margin: 1em auto 1em 2em;
        letter-spacing: 2.5px;
    }
    #closeBtn {
        font-size: 36px;
    }
	/* Slider */
    .slider li p {
        text-align: right;
        padding-left: 80%; 
    }
	
	/* Grid */
    .col-1 {
        width: 4.33%;
    }
    .col-2 {
        width: 12.66%;
    }
    .col-3 {
        width: 21%;
    }
    .col-4 {
        width: 29.33%;
    }
    .col-5 {
        width: 37.66%;
    }
    .col-6 {
        width: 46%;
    }
    .col-7 {
        width: 54.33%;
    }
    .col-8 {
        width: 62.66%;
    }
    .col-9 {
        width: 71%;
    }
    .col-10 {
        width: 79.33%;
    }
    .col-11 {
        width: 87.66%;
    }
    .col-12 {
        width: 96%;
    }
}