/* CSS Document */

/*added elements*/

@font-face {
    font-family: 'the_bold_fontbold';
    src: url('../fonts/theboldfont-webfont.eot');
    src: url('../fonts/theboldfont-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/theboldfont-webfont.woff2') format('woff2'),
         url('../fonts/theboldfont-webfont.woff') format('woff'),
         url('../fonts/theboldfont-webfont.ttf') format('truetype'),
         url('../fonts/theboldfont-webfont.svg#the_bold_fontbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* General link styles */
.link {
	outline: none;
	text-decoration: none;
	position: relative;
	line-height: 1;
	color: #9e9ba4;
	display: inline-block;
}


/* Media Queries */
@media screen and (max-width: 50em) {
	.link--surinami { font-size: 3em; }
}


*, *:after, *:before { box-sizing: border-box; }
.clearfix:before, .clearfix:after {display: table;  content: ''; }
.clearfix:after { clear: both; }

/* Grid */
.grid__item {
	max-width: calc(100vw - 40px);
	margin: 20px;
	z-index: 1;
	position: relative;
	text-align: center;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-transform: translate3d(0,0,0); /* Solves Safari bug because of SVG clipping mask */
}

.grid__item p {
	font-size: 1.5em;
	font-weight: bold;
	color: #777;
}

/*end added elements*/

h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; font-weight: 700; }
body { font-family: 'Montserrat', sans-serif; }
.toppy {  background: #000; background: -webkit-linear-gradient(#444, #000); background: -o-linear-gradient(#444, #000); background: -moz-linear-gradient(#444, #000); background: linear-gradient(#444, #000); }
.toppy h1 { text-align: center; font-size: 6rem; font-family: 'the_bold_fontbold'; padding: 2rem 0; }
.toppy h1 a { color: #fff; }

.head_image { width: 100%; height: 42rem; background: url(../img/top_photo.png) top center; background-size: cover; }
.middle_container { margin: 3rem 0; }
.middle_container h3 { color: #aaa; }
.middle_container hr { margin-bottom: 4rem; }
.cia_container { display: none; background: #222; width: 100%; padding: 2.5rem; }
.cia_container h3 { color: #666; margin-top:  4rem; text-align: center; }


/*home specific */
.menu-home { font-size: .8rem; font-weight: bold; text-transform: uppercase; }
.menu-home li { padding: .2rem 1rem; }
.menu-home li a { color: #fff; }
.menu-home li a:hover { color: #3FBBB7; -moz-transition: color .25s linear; -ms-transition: color .25s linear; -o-transition: color .25s linear; transition: color .25s linear; -webkit-transition: color .25s linear; }
.menu-home .active { background: #3FBBB7; color: #222; }
.menu-home .active a:hover { background: #3FBBB7; color: #222; }
.footer-home { width: 100%; background: #3FBBB7; }
.footer-home p { color: #fff; font-weight: bold; margin: .5rem 0; }

/* Surinami */
.link--surinami--home { font-family: 'the_bold_fontbold'; font-weight: 400; text-transform: uppercase; font-size: 6rem; color: #fff; padding: 0 0 0.125em; }
.link--surinami--home::before, .link--surinami--home::after { content: ''; width: 100%; height: 3px; z-index: -1; background: #ccc; position: absolute; -webkit-transform: scale3d(0,1,1); transform: scale3d(0,1,1); -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; }
.link--surinami--home::before { right: 0; top: 0; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; }
.link--surinami--home::after { left: 0; bottom: 0; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; }
.link--surinami--home:hover::before, .link--surinami--home:hover::after { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
.link--surinami--home span { position: relative; -webkit-transition: color 0.5s; transition: color 0.5s; }
.link--surinami--home:hover span { color: transparent; }
.link--surinami--home span::before, .link--surinami--home span::after { position: absolute; color: #3FBBB7; opacity: 0; -webkit-transition: -webkit-transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.5s; }
.link--surinami--home span::before { content: attr(data-letters-l); left: 0; -webkit-transform: translate3d(-5px,0,0); transform: translate3d(-5px,0,0); }
.link--surinami--home span::after { content: attr(data-letters-r); right: 0; -webkit-transform: translate3d(5px,0,0); transform: translate3d(5px,0,0); }
.link--surinami--home:hover span::before, .link--surinami--home:hover span::after { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
/*end home specific */

/*reviews specific */
.menu-reviews { font-size: .8rem; font-weight: bold; text-transform: uppercase; }
.menu-reviews li { padding: .2rem 1rem; }
.menu-reviews li a { color: #fff; }
.menu-reviews li a:hover { color: #4E174F; -moz-transition: color .25s linear; -ms-transition: color .25s linear; -o-transition: color .25s linear; transition: color .25s linear; -webkit-transition: color .25s linear; }
.menu-reviews .active { background: #4E174F; color: #222; }
.menu-reviews .active a:hover { background: #4E174F; color: #222; }
.footer-reviews { width: 100%; background: #4E174F; }
.footer-reviews p { color: #fff; font-weight: bold; margin: .5rem 0; }
.hvr-grow { display: block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; }
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active { -webkit-transform: scale(1.1); transform: scale(1.1); }
.review { font-size: 1.2rem; color: #4e174f; margin-bottom: 0; }
.reviewee { font-family: 'Georgia', serif; font-style: italic; color: #a0a0a0; }


/* Surinami */
.link--surinami--reviews { font-family: 'the_bold_fontbold'; font-weight: 400; text-transform: uppercase; font-size: 6rem; color: #fff; padding: 0 0 0.125em; }
.link--surinami--reviews::before, .link--surinami--reviews::after { content: ''; width: 100%; height: 3px; z-index: -1; background: #ccc; position: absolute; -webkit-transform: scale3d(0,1,1); transform: scale3d(0,1,1); -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; }
.link--surinami--reviews::before { right: 0; top: 0; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; }
.link--surinami--reviews::after { left: 0; bottom: 0; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; }
.link--surinami--reviews:hover::before, .link--surinami--reviews:hover::after { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
.link--surinami--reviews span { position: relative; -webkit-transition: color 0.5s; transition: color 0.5s; }
.link--surinami--reviews:hover span { color: transparent; }
.link--surinami--reviews span::before, .link--surinami--reviews span::after { position: absolute; color: #4E174F; opacity: 0; -webkit-transition: -webkit-transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.5s; }
.link--surinami--reviews span::before { content: attr(data-letters-l); left: 0; -webkit-transform: translate3d(-5px,0,0); transform: translate3d(-5px,0,0); }
.link--surinami--reviews span::after { content: attr(data-letters-r); right: 0; -webkit-transform: translate3d(5px,0,0); transform: translate3d(5px,0,0); }
.link--surinami--reviews:hover span::before, .link--surinami--reviews:hover span::after { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }

/*end reviews specific */

/*themes specific */
.menu-themes { font-size: .8rem; font-weight: bold; text-transform: uppercase; }
.menu-themes li { padding: .2rem 1rem; }
.menu-themes li a { color: #fff; }
.menu-themes li a:hover { color: #FF9326; -moz-transition: color .25s linear; -ms-transition: color .25s linear; -o-transition: color .25s linear; transition: color .25s linear; -webkit-transition: color .25s linear; } 
.menu-themes .active { background: #FF9326; color: #222; }
.menu-themes .active a:hover { background: #FF9326; color: #222; }
.footer-themes { width: 100%; background: #FF9326; }
.footer-themes p { color: #fff; font-weight: bold; margin: .5rem 0; }
.theme_description { border: solid 1px #fff; }
.theme_description img { margin: 1rem 0; }
.theme_description:hover { background-color: #FFCD9B; border: solid 1px #FF9326; transition: background-color 0.5s ease; }
.theme_description:hover h3 { color: #222; transition: color 0.5s ease; }
.theme_description h3 { font-size: 1.5rem; }
.theme_description p { font-size: .9rem; }

/* Surinami */
.link--surinami--themes { font-family: 'the_bold_fontbold'; font-weight: 400; text-transform: uppercase; font-size: 6rem; color: #fff; padding: 0 0 0.125em; }
.link--surinami--themes::before, .link--surinami--themes::after { content: ''; width: 100%; height: 3px; z-index: -1; background: #ccc; position: absolute; -webkit-transform: scale3d(0,1,1); transform: scale3d(0,1,1); -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; }
.link--surinami--themes::before { right: 0; top: 0; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; }
.link--surinami--themes::after { left: 0; bottom: 0; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; }
.link--surinami--themes:hover::before, .link--surinami--themes:hover::after { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
.link--surinami--themes span { position: relative; -webkit-transition: color 0.5s; transition: color 0.5s; }
.link--surinami--themes:hover span { color: transparent; }
.link--surinami--themes span::before, .link--surinami--themes span::after { position: absolute; color: #FF9326; opacity: 0; -webkit-transition: -webkit-transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.5s; }
.link--surinami--themes span::before { content: attr(data-letters-l); left: 0; -webkit-transform: translate3d(-5px,0,0); transform: translate3d(-5px,0,0); }
.link--surinami--themes span::after { content: attr(data-letters-r); right: 0; -webkit-transform: translate3d(5px,0,0); transform: translate3d(5px,0,0); }
.link--surinami--themes:hover span::before, .link--surinami--themes:hover span::after { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }

/*end themes specific */

/*party specific*/
.menu-party { font-size: .8rem; font-weight: bold; text-transform: uppercase; }
.menu-party li { padding: .2rem 1rem; }
.menu-party li a { color: #fff; }
.menu-party li a:hover { color: #A3D900; -moz-transition: color .25s linear; -ms-transition: color .25s linear; -o-transition: color .25s linear; transition: color .25s linear; -webkit-transition: color .25s linear; } 
.menu-party .active { background: #A3D900; color: #222; }
.menu-party .active a:hover { background: #A3D900; color: #222; }
.footer-party { width: 100%; background: #A3D900; }
.footer-party p { color: #fff; font-weight: bold; margin: .5rem 0; }

/* Surinami */
.link--surinami--party { font-family: 'the_bold_fontbold'; font-weight: 400; text-transform: uppercase; font-size: 6rem; color: #fff; padding: 0 0 0.125em; }
.link--surinami--party::before, .link--surinami--party::after { content: ''; width: 100%; height: 3px; z-index: -1; background: #ccc; position: absolute; -webkit-transform: scale3d(0,1,1); transform: scale3d(0,1,1); -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; }
.link--surinami--party::before { right: 0; top: 0; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; }
.link--surinami--party::after { left: 0; bottom: 0; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; }
.link--surinami--party:hover::before, .link--surinami--party:hover::after { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
.link--surinami--party span { position: relative; -webkit-transition: color 0.5s; transition: color 0.5s; }
.link--surinami--party:hover span { color: transparent; }
.link--surinami--party span::before, .link--surinami--party span::after { position: absolute; color: #A3D900; opacity: 0; -webkit-transition: -webkit-transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.5s; }
.link--surinami--party span::before { content: attr(data-letters-l); left: 0; -webkit-transform: translate3d(-5px,0,0); transform: translate3d(-5px,0,0); }
.link--surinami--party span::after { content: attr(data-letters-r); right: 0; -webkit-transform: translate3d(5px,0,0); transform: translate3d(5px,0,0); }
.link--surinami--party:hover span::before, .link--surinami--party:hover span::after { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }

/*end party specific */