/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jan 21, 2019, 11:32:57 AM
    Author     : lrighetti
*/

body{
    margin:0;
    padding: 0;
    background-color: #FFFFFF;
    text-align: center;	
    overflow-x: hidden;
}

#div1{
    background: url("img/1dark2.jpg");
    background-size: cover;
    background-position: center, center;
    
}
#div2{
    background: url("img/2.jpg");
    background-size: cover;
    background-position: center, center;
    
}
#div3{
    background: url("img/3dark.jpg");
    background-size: cover;
    background-position: center, center;
}

#div4{
    background: url("img/4dark.jpg");
    background-size: cover;
    background-position: center, center;
}

.divEven{
    color: white;
    background-color: teal;
    width:100%;
    padding:40px 0px 40px 0px;
}

.divOdd{
    color: black;
    background-color: white;
    width:100%;
    padding:40px 0px 40px 0px;
    
    box-shadow: inset 0 10px 19px -7px rgba(0,0,0,0.4),inset 0 -10px 19px -7px rgba(0,0,0,0.4);
    /*
    -moz-box-shadow:    inset 0 0 25px #000000;
   -webkit-box-shadow:	inset 0 0 25px #000000;
    box-shadow:         inset 0 0 25px #000000;
    */
}


.divVerticalCenter{
    display: table;
    text-align: center;
    width:100%;
}
.divVerticalCenterWrap{
    display: table-cell;
    vertical-align: middle;
}

.test{
    border: 1px solid red;
}

.title{
    font-family: quadon;
    font-size: 52px;
}
.subtitle{
    font-size: 24px;
    font-family: 'Roboto', serif;
    font-weight: 300;
}

.subtitleSlab{
    font-size: 18px;
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
}

.subsubtitle{
    font-size: 18px;
    font-family: 'Roboto', serif;
    font-weight: 300;
    font-style: italic;
}

.subtitlequote{
    font-size: 20px;
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    font-style: italic;
}
.subtitlequotebold{
    font-size: 20px;
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
    font-style: italic;
}

.subtitlename{
    font-size: 18px;
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
}
.subtitlenamebold{
    font-size: 18px;
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
}

.divBox1{
    color: #FFFFFF;
    font-weight: 300;
    font-family: 'Roboto Slab', serif;
    
    width:190px;
    padding: 10px 12px;
   
    background: rgb(0,170,177); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(0,170,177,1) 49%, rgba(242,236,225,1) 51%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,170,177,1) 49%,rgba(242,236,225,1) 51%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,170,177,1) 49%,rgba(242,236,225,1) 51%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aaaa', endColorstr='#f2ece1',GradientType=0 ); /* IE6-9 */
    
    background-size: 100% 200%;
    background-position:left top;
    margin:0.2em;
    transition:all 0.5s ease;

    font-size: 25px;
    display: inline-block;
    cursor: pointer;
    
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
          
    outline: none !important;   
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);    
}
.divBox1:hover {
    background-position:left bottom;
    color: #111111;
}

.divBoxEmptyDark{
    border: 2px solid #00aabb;

    color: #00aabb;
    font-family: 'Roboto Slab', serif;
    
    width:190px;
    padding: 10px 12px;
   
    margin:0.2em;
    transition:all 0.5s ease;

    font-size: 25px;
    font-weight: 400;

    display: inline-block;
    cursor: pointer;
    
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
          
    outline: none !important;   
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);    
}
.divBoxEmptyDark:hover {
    color: #FFFFFF;

    background-color: #00aabb;
}

.divBoxEmptyLight{
    border: 2px solid #FFFFFF;

    color: #FFFFFF;
    font-family: 'Roboto Slab', serif;
    
    width:190px;
    padding: 10px 12px;
   
    margin:0.2em;
    transition:all 0.5s ease;

    font-size: 25px;
    font-weight: 400;

    display: inline-block;
    cursor: pointer;
    
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
          
    outline: none !important;   
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);    
}
.divBoxEmptyLight:hover {
    border: 2px solid #00aabb;
    color: #FFFFFF;

    background-color: #00aabb;
}

.divBoxContainer{
    display: inline-block;
    width:200px;
    padding:15px;
    font-weight: 300;
    font-family: 'Roboto Slab', serif;
}


.aMenu{
	color:#000000;
	text-decoration:none;
	outline: none !important;
	-webkit-tap-highlight-color: transparent;
	transition:all 0.5s ease;
}
.aMenu:hover{
	color:#00aaaa;
}

.fadeInOnVisible{
    opacity: 0;
    padding:10px;
    max-width: 1300px;
    width: 70vw;
    margin: 0 auto;
}
.fadein{
    opacity: 0;
}

.iframeYoutube{
    width: 70vw;
    height: 39.675vw;
}

@font-face {
	font-family:quadon;
	src: 
	url('https://europe.jhu.edu/alumniweekend/Quadon-Regular.woff'),
	url('https://europe.jhu.edu/alumniweekend/Quadon-Regular.ttf');
}



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

    .iframeYoutube{
        width: 80vw;
        height: 45.342vw;
    }
    .fadeInOnVisible{
        width: 80vw;
    }
}