/*
Theme Name:		Hamlet
Author:			801red
Author URI: 	http://www.801red.com
Version: 		1.0
*/

/**
 * 1.0 Global
 * ----------------------------------------------------------------------------- */
 
/* INNER BOX PADDING FOR RESPONSIVE COLUMNS */
* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */	
}


/* BASIC SETUP */

/* TYPOGRAPHY */
a,
a:focus {
	outline:none;
    border: none;
}
a:active { outline: none; }  
a:focus{ -moz-outline-style: none; }

/* Headings */

/* Text elements */

/* TABLES */

/* FORMS */

/* TAGS */


/**
 * 2.0 Layout
 * ----------------------------------------------------------------------------- */

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.flex-container.justify {
	-webkit-box-pack:justify;
	    -ms-flex-pack:justify;
	        justify-content:space-between;
}
.flex-container.justify-left {
	-webkit-box-pack:start;
	    -ms-flex-pack:start;
	        justify-content:flex-start;
}
.flex-container.justify-center {
	-webkit-box-pack:center;
	    -ms-flex-pack:center;
	        justify-content:center;
}
.flex-container.justify-right {
	-webkit-box-pack:end;
	    -ms-flex-pack:end;
	        justify-content:flex-end;
}
.flex-container.align-top {
	-webkit-box-align:start;
	    -ms-flex-align:start;
	        align-items:flex-start;
}
.flex-container.align-center {
	-webkit-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
}
.flex-container.align-bottom {
	-webkit-box-align:end;
		-ms-flex-align:end;
			align-items:flex-end;
}
.flex-container.wrap {
	-ms-flex-wrap:wrap;
	    flex-wrap:wrap;
}
.flex-container.column {
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	    -ms-flex-direction:column;
	        flex-direction:column;
}

#header {
    height: 20vh;
}
#team {
    height: 65vh;
    padding: 0 0 2em !important;
}
#nav {
    height: 6vh;
}

.video-block {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  width: 100%;
}

.video-block iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/**
 * 3.0 Header
 * ----------------------------------------------------------------------------- */
.beauty-wrapper {
    height: 100vh;
}
#team .purchase {
    flex: 0 0 20%;
}
#team .keyart {
    flex: 0 0 58%;
}
#team .purchase.video {
    flex: 0 0 100%;
}
#team .purchase p {
    text-align: center;
    color: #FFF;
    font-size: 14px;
    line-height: 16px;
    margin-top: 20px;
}
#team.alt .keyart img {
	max-width: 100% !important;
}
.wishlist {
	background-image: url("../../images/Website_button.png");
	background-repeat: no-repeat;
    background-position: center;
	display: block;
	background-size: contain;
	width: 250px;
    height: 82px;
    padding: 15px;
    margin: auto;
}
.wishlist img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
}
.video .wishlist {
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 54px;
	color: #FFF;
}

/**
 * 4.0 Navigation
 * ----------------------------------------------------------------------------- */

/* MAIN NAVIGATION */

/**
 * 5.0 Asides
 * ----------------------------------------------------------------------------- */

/* SIDEBAR */

/* WIDGETS */


/**
 * 6.0 Content
 * ----------------------------------------------------------------------------- */

/* SLIDESHOW */

/* SOCIAL ICONS */

/* BUTTONS */


/**
 * 7.0 Footer
 * ----------------------------------------------------------------------------- */

/* FOOTER */

/* COLOPHON */

/**
 * 8.0 Responsive
 * ----------------------------------------------------------------------------- */

.mobile { display: none; }


@media all and (max-width: 1280px) {
    #team .keyart {
        flex: 0 0 50%;
    }
}
@media all and (max-width: 1200px) {
    #header {
        height: 35vh;
    }
    #team {
        height: 50vh;
        padding: 0 0 2em !important;
        -webkit-box-pack:center;
            -ms-flex-pack:center;
                justify-content:center;
        -ms-flex-wrap:wrap;
            flex-wrap:wrap;
    }
    #nav {
        height: 15vh;
    }
    .wishlist {
        max-width: 250px;
        max-height: 65px;
    }
    .video .wishlist {
        font-size: 16px;
        line-height: 36px;
    }
    #team .purchase {
        order: 2;
    }
    #team.alt .keyart {
        flex: 0 0 100%;
        margin: 0 0 3.5em 0 !important;
    }
    #team.alt .keyart img {
        max-width: 50% !important;
    }
}
@media all and (max-width: 968px) {
    #header {
        height: 30vh;
    }
    #team.alt .keyart img {
        max-height: 55vh;
        max-width: 60% !important;
    }
    #nav {
        height: 25vh;
    }
}
@media all and (max-width: 736px) {
    #header,
    #team,
    #nav,
    .beauty-wrapper {
        height: auto;
    }
    .major.mobile, .purchase {
        flex: 0 0 100%;
    }
    header.major h2::after {
        margin: auto;
    }    
    .desktop { display: none; }
    .mobile { display: block; }
}
@media all and (max-width: 568px) {
    #team.alt .keyart img {
        max-width: 100% !important;
    }
    .icon.alt::before {
        display: block;
        font-size: 1.5em;
        width: 1.8em;
        height: 1.8em;
        text-align: center;
        line-height: 1.8em;
    }
}