@charset "utf-8";

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

Theme Name:	Storm Scott Purple
Author:		Olivia Anne Wolski]
Version:	1.0

Colors Used: White, purple (#832886), orange (#f7941d), and dark gray (#3c4647).

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

/* * * * * * * * * * * * * * * * * * * * *
 * * * Reset
 * * * * * * * * * * * * * * * * * * * * */
body, html {
	margin:0;
	padding:0;
	width:100%;
}

a {
	color:white;
	text-decoration:none;
}

/* * * * * * * * * * * * * * * * * * * * *
 * * * Embedded Fonts
 * * * * * * * * * * * * * * * * * * * * */
 

/* * * * * * * * * * * * * * * * * * * * *
 * * * General Rules
 * * * * * * * * * * * * * * * * * * * * */
body {
	font-family: 'Roboto';
	font-size:18px;
}

.pagebox {
	background-color:#3c4647;
	color:white;
}

.content {
	padding-left:10%;
	padding-right:10%;
	padding-bottom:20px;
}

.titleline {
	color:#832886;
	font-size:50px;
	text-transform:uppercase;
	font-family: 'Oswald';
	font-weight:700;
	background-color:white;
	width:100%;
	padding-top:20px;
	padding-bottom:20px;
	text-align:center;
	padding-left: 0;
	padding-right:0;
	margin-bottom:0;
	margin-top:-8px;
}

.titledivider {
	color: #f7941d;
}

#navtitle {
	color:#832886;
	font-size:50px;
	text-transform:uppercase;
	font-family: 'Oswald';
	font-weight:700;
	text-align:center;
	width:100%;
	display:inline-block;
}

#navbox {
	text-align:center;
	width:100%;
}

.navbutton {
	width:350px;
	height:350px;
	line-height:350px;
	display:inline-block;
	margin:2%;
	vertical-align:top;
	text-transform:uppercase;
	color:white;
	font-family: 'Oswald';
	font-weight:700;
	font-size:35px;
	opacity:1;
	transition: all .5s ease;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
}

.navbutton:hover {
	opacity:.7;
}

.navbutton#vis {
	background-image:url(https://stormscott.nl/wordpress/wp-content/uploads/drop.jpg);
	background-size:100% auto;
}

.navbutton#con {
	background-image:url(https://stormscott.nl/wordpress/wp-content/uploads/colorlogo.jpg);
	background-size:100% auto;
}

.navbutton#jer {
	background-image:url(https://stormscott.nl/wordpress/wp-content/uploads/jeroen_btn.jpg);
	background-size:100% auto;
}

.navbutton#car {
	background-image:url(https://stormscott.nl/wordpress/wp-content/uploads/caroline_btn.jpg);
	background-size:100% auto;
}

.navbutton#agn {
	background-image:url(https://stormscott.nl/wordpress/wp-content/uploads/logo_bw.jpg);
	background-size:100% auto;
}

.navbutton#vid {
	background-image:url(https://stormscott.nl/wordpress/wp-content/uploads/video_btn.jpg);
	background-size:100% auto;
}

/* * * * * * * * * * * * * * * * * * * * *
 * * * Top Box
 * * * * * * * * * * * * * * * * * * * * */

#topbox {
	width:100%;
	display:none;
}

#topbox.active {
	display:block;
}

#topbox.active img {
	width:100%;
	height:auto;
}

#textoverlay {
	z-index:999;
	background-color:rgba(131,40,134,.7);
	width:30%;
	margin-left:10%;
	margin-top:50px;
	padding:40px;
	font-size:16px;
	color:white;
	position:absolute;
	top:150px;
	left:30px;
}

#button {
	background-color:rgba(131,40,134,.7);
	padding:30px;
	width:170px;
	color:white;
	font-size:20px;
	margin-left:70%;
	position:absolute;
	top:20px;
	right:20px;
	transition: all 1s ease;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
}

#button:hover {
	background-color:rgba(131,40,134,1);
}

/* * * * * * * * * * * * * * * * * * * * *
 * * * Page Box
 * * * * * * * * * * * * * * * * * * * * */
.boxes {
	text-align:center;
}

.pagebox {
	text-align:center;
}

.pagebox .logo {
	padding-top:45px;
	width:20%;
	display:inline-block;
	vertical-align:top;
}

.pagebox .logo img {
	width:95%;
	max-width:500px;
}

.pagebox .text {
	padding-top:45px;
	line-height:35px;
	width:65%;
	display:inline-block;
	text-align:left;
	margin-left:5%;
	max-width:670px;
}

.pagebox .text p {
	margin:0;
	margin-top:-5px;
	margin-bottom:15px;
	padding:0;
}

.navboxbig {
	margin-top:20px;
	display:inline-block;
	width:45%;
	opacity:1;
	transition: all 1s ease;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
}


.navboxbig img {
	width:100%;
}

.navboxsm, .navboxmore{
	display:inline-block;
	width:22%;
	margin:0;
	padding:0;
	vertical-align:top;
	opacity:1;
	transition: all 1s ease;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	margin-left: 4px;
}

.navboxsm:first-child {
	margin-left:0;
}

.navboxmore img {
	width:100%;
	height:auto;
}

.navboxmore {
	position:relative;
	background-image:url(img/more-over.jpg);
	background-size:100% auto;
	background-repeat: no-repeat;
}

.navboxmore#videos {
	height:150px;
}

.navboxmore {
	cursor:pointer;
}

.navboxmore:hover .front {
	opacity:0;
}

.navboxsm img {
	width:100%;
}

.boxes {
	margin-bottom:50px;
}

.imagebox {
	width:100%;
	position:relative;
}

.imagebox img {
	width:100%;
	height:auto;
	z-index:-99;
}

.imagebox .content {
	color:white;
	width:40%;
	position:absolute;
	top:250px;
	left:20px;
	text-align:left;
	line-height:35px;
}

.imagebox#caroline .content {
	color:white;
}

.imagebox#agency .content {
	color:white;
}

#footer {
	background-color:#3c4647;
	color:white;
	text-align:center;
	padding-top:30px;
	padding-bottom:30px;
}

.contactbox {
	display:inline-block;
	width:30%;
}

.contactbox img {
	height:150px;
	width:auto;
	margin:10px;
}

.contactbox#left {
	text-align:left;
}

.contactbox#right {
	text-align:center;
}

.contactboxe {
	background-color:#f7941d;
	color:white;
	text-align:center;
}

.contactboxe h1 {
	font-family: 'Oswald';
	font-weight:700;
	text-transform:uppercase;
	font-size:40px;
}

.contactboxe .leftcol {
	display:inline-block;
	width:45%;
	vertical-align:top;
	text-align:left;
}

.contactboxe .rightcol {
	display:inline-block;
	margin-left:5%;
	width:45%;
	vertical-align:top;
	text-align:left;
	color:#3c4647;
}

.contactboxe span {
	color:#3c4647;
}

.contactboxe input {
	border: 2px solid white;
	background-color:#f7941d;
	width: 100%;
	font-size:40px;
	padding:5px;
	color:white;
}

input[type=submit] {
	color:white;
	font-family: 'Oswald';
	font-weight:700;
	padding:10px;
	background-color:#832886;
	width:100%;
	font-size:45px;
	text-align:center;
	transition: all 1s ease;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	opacity:1;
	border:0;
}

input[type=submit]:hover {
	cursor:pointer;
	color:#832886;
	background-color:white;
}

.go-top {
    position: fixed;
    bottom: 0.75em;
    right: 0.5em;
    text-decoration: none;
    color: white;
    background-color: rgba(0, 0, 0, 0.25);
    font-size: 14px;
    padding: 10px;
    display: none;
    margin: 0;
}

.go-top:hover {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    text-decoration: none;
}

/* ***********************************
RESPONSIVE
************************************ */

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

	.imagebox .content {
		width:90%;
		left:0px;
		top:150px;
		margin-top:0;
		margin-left:0px;
		padding:5%;
	}

	#textoverlay {
		width:90%;
		margin-left:0;
		margin-top:0;
		padding:5%;
		position:static;
		background-color:#832886;
	}

	.contactbox img {
		height:50px;
		width:auto;
		margin:10px;
	}
}

/* EDIT SLIDER */

#topbox .erdots {
	overflow: visible !important;
}

#topbox .erdots_btn_normal, #topbox .erdots_btn_selected, #topbox .erdots_btn_hover  {
	width: 30px !important;
	height:30px !important;
	margin-top:-70px !important;
	background-size: 30px 30px !important;
}

#topbox .erdots_btn_normal {
	background-image:url(https://stormscott.nl/wordpress/wp-content/uploads/circle.png) !important;
}

#topbox .erdots_btn_hover {
	background-image:url(https://stormscott.nl/wordpress/wp-content/uploads/circle.png) !important;
	opacity:.7 !important;
}

#topbox .erdots_btn_selected {
	background-image:url(https://stormscott.nl/wordpress/wp-content/uploads/circle-selected.png) !important;
}

#topbox .erimgMain_arrowLeft {
	margin-left:30px;
	width: 40px !important;
	height: 40px !important;
	background-image:url(https://stormscott.nl/wordpress/wp-content/uploads/leftarrow.png) !important;
	background-size: 100% 100%;
}

#topbox .erimgMain_arrowLeft:hover {
	opacity:.7;
	cursor:pointer;
}

#topbox .erimgMain_arrowLeft img {
	opacity:0;
}

#topbox .erimgMain_arrowRight {
	margin-right:30px;
	width: 40px !important;
	height: 40px !important;
	background-image:url(https://stormscott.nl/wordpress/wp-content/uploads/rightarrow.png) !important;
	background-size: 100% 100%;
}

#topbox .erimgMain_arrowRight:hover {
	opacity:.7;
	cursor:pointer;
}

#topbox .erimgMain_arrowRight img {
	opacity:0;
}