* {box-sizing: border-box;}
.mySlides {display: none;}
img {vertical-align: middle;}

/*---------------------G R I D------------------------*/
.parent {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(3, auto);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	position:absolute;
	left:27vw;
	top:0;
	width:60vw;
	height:100%;
	background-color:#fff;
	}

.div1 { 
	grid-area: 1 / 1 / 2 / 2; 
	background-color:#e6e6e6;
	height:15vw;
	z-index:40;
	}

.div2 { 
	grid-area: 1 / 1 / 4 / 2; 
	background-color:#FFF;
	z-index:30;
	display:none;
	}

.div3 { 
	grid-area: 1 / 1 / 4 / 2; 
	z-index:50;
	width:100%;
	height:45vw;
	max-height:45vw;
	background-position: center; 
	background-image:url(images/ccc_graycircle.png); 
	background-repeat:no-repeat; 
	background-size: contain;
	display: block;
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	}

/*---------------S L I D E S H O W-------------------------*/
.mySlides {
	position:absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	display: block;
	margin: auto;
	width:45vw;
	}

#slide1, #slide2, #slide3, #slide4 {
	width:45vw;
	}
	
/* Fading animation */
.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 3s;
	animation-name: fade;
	animation-duration: 3s;
	animation-timing-function: ease-in-out;
	}

@-webkit-keyframes fade {
	from {opacity: 0.2} 
	to {opacity: 1}
	}

@keyframes fade {
	from {opacity: 0.2} 
	to {opacity: 1}
	}


/*-------------------------M E D I A-----------------------------------*/
/*Small laptops, landscape tablets*/
@media screen and (max-width: 1200px) and (min-width: 800px) and (orientation:landscape){

/*---------------------G R I D------------------------*/
.parent {
	position:absolute;
	left:23vw;
	width:70vw;
	}

.div1 { 
	height:17vw;
	}

.div2 { 
	display:none;
	}

.div3 { 
	height:50vw;
	max-height:50vw;
	}
	
/*-------S L I D E S H O W---------*/
.mySlides {
	width:50vw;
	}

#slide1, #slide2, #slide3, #slide4 {
	width:50vw;
	}	
}


/*Portrait tablets, phones*/
@media screen and (max-width: 800px) and (orientation:portrait){

/*---------------------G R I D------------------------*/
.parent {
	left:5vw;
	top:0;
	width:90%;
	height:100vh;
	position:relative;
	}

.div1 { 
	height:18vw;
	}

.div2 { 
	display:none;
	}

.div3 { 
	grid-area: 1 / 1 / 4 / 2; 
	width:100%;
	height:70vw;
	max-height:70vw;
	background-size: contain;
	margin:0;
	display: block;
	position:absolute;
	bottom:10vw;
	top:auto;
	}
	
/*-------S L I D E S H O W---------*/
.mySlides {
	width:70vw;
	}

#slide1, #slide2, #slide3, #slide4 {
	width:70vw;
	}	
	
}


/*Landscape tablets, phones*/
@media screen and (max-width: 800px) and (orientation:landscape){

/*---------------------G R I D------------------------*/
.parent {
	position:absolute;
	left:23vw;
	width:72vw;
	}

.div1 { 
	height:18vw;
	background-color:#FFF;
	}

.div2 { 
	display:none;
	}

.div3 { 
	height:45vw;
	max-height:45vw;
	}
	
/*Main elements*/

#logo {
	width:18vw;
    height: 18vw;
	left:5vw;
	position:absolute;
	}
	
#logo img {
	width:9.1vw;
	}	

.vertical-menu {
	width: 18vw;
    height: 18vw;
	left:5vw;
	top:18vw;
	position:absolute;
	}

.vertical-menu a {
	padding-left:3.5vw;
	letter-spacing:0.3vw;
	line-height:3.8vw;
	font-size:1.9vw;
	}		
}