/*
Theme Name:   marcSelf
Author:       Marc
Author URI:   https://marcdekeijzer.nl
Description:  Thema van Marc door Marc gemaakt
Version:      0.0.1
Text Domain:  Marcself
*/

html{
	font-size:76.50%;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
	.container_content_box{
		margin-bottom:15rem;
		margin-right: 5rem;
		margin-left:5rem;
	}
	html {
		font-size: 100%;
	}
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px)
and (max-device-width : 480px){
	.container_content_box{
		margin-bottom:15rem;
		margin-right: 5rem;
		margin-left:5rem;
	}
	html {
		font-size: 100%;
	}
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
	.container_content_box{
		margin-bottom:15rem;
		margin-right: 5rem;
		margin-left:5rem;
	}
	html {
		font-size: 100%;
	}
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
	.container_content_box{
		margin-bottom:15rem;
		margin-right: 5rem;
		margin-left:5rem;
	}
	html {
		font-size: 100%;
	}
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
	.container_content_box{
		margin-bottom:15rem;
		margin-right: 5rem;
		margin-left:5rem;
	}
	html {
		font-size: 100%;
	}
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
	.container_content_box{
		margin-bottom:15rem;
		margin-right: 5rem;
		margin-left:5rem;
	}
	html {
		font-size: 100%;
	}
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
	.container_content_box{
		margin-bottom:15rem;
		margin-right: 5rem;
		margin-left:5rem;
	}
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
	.container_content_box{
		margin-bottom:15rem;
		margin-right: 5rem;
		margin-left:5rem;
	}
}

body {
    max-width: 100%;
    overflow-x: hidden;
	margin: 0 0 0 0;
	font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
	background-color: #eee;
	max-height: 100%;
	/*background-color:#e0e0e0;*/ 
	
}

.head_top{
	height:3rem;
	border-bottom:8px solid #eee;
	/*background-color:#5c383f;*/
	background: linear-gradient(-45deg, #5c383f, #83505A, #5c383f);
}

.container_head_bottom{
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}

.row_head_bottom {
	display:flex;
	height:6rem;
	/*background-color:#5c383f;*/
	background: linear-gradient(-45deg, #5c383f, #83505A, #5c383f);
}

.logo{
	height: 6rem;
	display:flex;
}

nav{
	width:100%;
	position:relative;
	font-size: 1.5rem;
	color:#eee;
	display:flex;
}

.menu {
    margin-top:2rem;
    display: flex;
    flex-wrap: wrap;
	list-style-type:none;
	cursor: pointer;
	margin-left: 1rem;
}

.menu-list{
	padding-right:15px;
}

.sub-menu{
	display:grid;
	padding: 3rem 2rem 3rem 4rem;
	flex-wrap: wrap;
	width: 5rem;
	z-index: 100000;
	position: absolute;
	border-radius: 0 0 25px 25px;
	box-shadow: 0 10px 15px rgba(0,0,0,.2);
	top: 100%;
	justify-content: center;
}


.menu-item{
	list-style-type:none;
	flex-basis: 50%;
	display:flex;
	justify-content: space-around;
	margin-top:0.9rem;
	margin-left:0.5rem;
	font-size:1.4rem;
	color:black;
	text-align: center;
	margin-right:1.5rem;
}

a:link, a:visited {
	text-decoration: none;
	color:#666666;
}
a:hover{
	color:black;
}

.menu-item-custom{
	display: block;
	opacity: 0;
	visibility: hidden;
	transition-duration: .3s;
	transition-property: opacity,visibility;
	background-color: #fff;
}

.open{
	visibility: visible;
	opacity: 1;
}

.container_content_box{
	margin-bottom:15rem;
}

.row_content_box{
	display:flex;
	height:7rem;
	width: 100%;
	justify-content: center;
	margin-top:13rem;
	align-content:center;
}

.content_box_left{
	float: left;
	width: 25rem;
	height: 18rem;
	background-color: white;
	margin-right: 7rem;
}

.content_box_middle{
	width: 25rem;
	height: 18rem;
	background-color: white;

}

.content_box_right{
	float: right;
	width: 25rem;
	height: 18rem;
	background-color: white;
	margin-left:7rem;
}

.content_box_shadow{
	box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 1%;
	transition: all 0.3s ease 0s;
}
.content_box_shadow:hover {
	box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.2);
	transform: translateY(-7px)
}

/* box draaien
/*.content_box_shadow{
	box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 1%;
	-webkit-transition: all 0.8s ease;
	transition: all 0.8s ease;
}

/* box draaien
.content_box_shadow:hover {
	box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.2);
	color: #fff;
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.mid{
	padding-top:5rem;
	padding-bottom:4rem;
}*/

.card__details {
	padding: 0 2rem 2rem;
}

.card_details ul {
	list-style: none;
	width: 75%;

}

.card_details ul li {
	text-align: center;
	font-size: 1.5rem;
	padding-top: 1rem;
}

/*a::after{
	font-family: fontello,sans-serif;
	font-style: normal;
	font-weight: 400;
	display: inline-block;
	text-decoration: inherit;
	width: 1em;
	text-align: center;
	font-variant: normal;
	text-transform: none;
	content: '\e803';
	font-size: .6rem;
	margin-left: .5rem;
	color: #666;
}*/