@font-face{
	font-family: 'cabin-regular'; /*a name to be used later*/
    src: url('../fonts/Cabin-Regular.ttf'); /*URL to font*/
}

@font-face{
	font-family: 'big-noodle'; /*a name to be used later*/
    src: url('../fonts/big_noodle_titling.ttf'); /*URL to font*/
}

#tab_1{
	display:block;
	background-color:#E6E6E6;
}

#tab_2, #tab_3, #tab_5{
	background:url("../img/bg_3.png");
	background-size:cover;
}

#tab_4{
	background:url("../img/bg_13.png");
	background-size:cover;
}

.tab{
	position:absolute;
	width:97%;
	height:83%;
	display:none;
	border-radius:15px;
}


.item{
	width:20%;
	height:40.1%;
	position:relative;
	display:inline-block;	
	margin-right:3.8%;
	margin-top:10%;
}

/*#item_1{
	background:url("../img/item_1_bg.png");
	background-size:cover;
}

#item_2{
	background:url("../img/item_2_bg.png");
	background-size:cover;
}

#item_3{
	background:url("../img/item_3_bg.png");
	background-size:cover;
}

#item_4{
	background:url("../img/item_4_bg.png");
	background-size:cover;
}*/

.item:first-of-type{
	margin-left:3.8%;
}

.item img{
	height:100%;
	position:absolute;
	left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;

}

.item img:first-of-type{
	z-index:2;
	height:80%;
	margin-top:10%;
	-webkit-transition:all 0.2s ease;
    transition:all 0.2s ease;
    -moz-transition:all 0.2s ease;
    -ms-transition:all 0.2s ease;
}

.item_bg{
	-webkit-transition:all 0.3s ease;
    transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -ms-transition:all 0.3s ease;
    -webkit-filter: blur(3px) grayscale(0.2);
}

.item:hover{
	cursor:pointer;
}

.item:hover .item_bg{
	-webkit-filter: blur(0px) grayscale(0);
}

.item:hover img:first-of-type{
	transform:rotate(4deg) scale(1.2);
}

.item:active img:first-of-type{
	transform:rotate(0deg) scale(1);
}

#footer{
	position:absolute;
	bottom:0;
	width:100%;
	height:17%;
}

#footer div{
	width:25%;
	height:12%;
	margin:0;
	padding:0;
	display:inline-block;
	float:left;
	clear:none;
}

#footer_text{
	background:#042C49;
	width:100% !important;
	height:88% !important;
	border-radius:0 0 15px 15px;

}

#footer_text p{
	margin:0;
	padding:0.6% 4%;
	color:white;
	font-size:1.85em;
	text-align:justify;
	font-family:cabin-regular;
}

#footer_text p b{
	color:#74C8E0;
}

.custom_bg{
	position:absolute;
	width:100%;
	height:100%;
	border-radius:15px;
}

#newspaper, #website, #drag_n_drop{
	position:absolute;
	bottom:0;	
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;

}

#newspaper{
	width:65%;
	height:96%;
}

#website{
	width:78%;
	height:96%;
}

#newspaper img, #website img, #drag_n_drop img{
	width:100%;
	position:absolute;
	bottom:0;
}

#newspaper_article{
	height:66%;
	width:50%;
	position:absolute;
	top:30%;
	left:7%;
	text-align:justify;
	overflow-y: scroll;
	overflow-x: hidden; 
}

#newspaper_article p{
	font-size:1.5em;
	padding:0 5% 0 0;
	
}


::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar:hover{
	cursor:pointer;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(76, 75, 73, 1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 1); 
}

::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(223, 141, 136, 1); 
}

.custom_btn{
	width:5%;
	height:9.5%;
	background: #205C8E;
	position: absolute;
	color:#FFF;
	font-size:3em;
	text-align:center;
	border-radius:10px;
	border-bottom:solid 6px #19466B;
}

.custom_btn:hover{
	cursor:pointer;
	background:#3D80AD;
}

.custom_btn:active{
	transform:scaleY(0.8);
	background:#104366;
}

.btn_home{
	bottom:4%;
	left:10%;
}

.btn_next{
	bottom:4%;
	right:10%;
	display:none;
}

#tab_3 .btn_home{
	left:4%;
}

#tab_4 .btn_home{
	left:5%;
}

.website{
	position:absolute;
	z-index:1;
}

#website_header{
	width:88.1%;
	height:14.5%;
	top:16.9%;
	left:6.1%;
	text-align:center;
}

#website_header h3{
	font-size:4em;
	margin:0;
	padding:0;
	line-height:1.4em;
	color:#42DDE0;
	font-family:big-noodle;
}

#website_nav{
	width:29.2%;
	height:66.7%; 
	left:6.1%;
	top:31.3%;
}

#website_nav div{
	width:85%;
	height:15%;
	background:gray;
	border-radius:10px;
	margin:0 auto 0 auto;
	background: rgb(156,160,160);
	background: rgb(156,160,160);
	background: -moz-linear-gradient(top,  rgba(156,160,160,1) 0%, rgba(84,91,91,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(156,160,160,1)), color-stop(100%,rgba(84,91,91,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(156,160,160,1) 0%,rgba(84,91,91,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(156,160,160,1) 0%,rgba(84,91,91,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(156,160,160,1) 0%,rgba(84,91,91,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(156,160,160,1) 0%,rgba(84,91,91,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ca0a0', endColorstr='#545b5b',GradientType=0 ); /* IE6-9 */
	border:solid 2px #545B5B;
	margin-bottom:3%;
    text-align: center;
}

#website_nav div:first-of-type{
	margin-top:8%;
}



#website_nav p{
	font-family:big-noodle;
	color:#ACE0E4;
	font-size:1.5em;
	padding:0;
	margin:0;
	position:relative;
	top:50%;
	transform:translateY(-50%);
}

#website_nav div:hover{
	cursor:pointer;
}

#website_nav div:hover p{
	color:#42DDE0;
}

.website_article{
	width:58.8%;
	height:66.6%;
	left:35.4%;
	top:31.3%;
	background:url("../img/website_bg_1.png");
	background-size:cover;
	display:none;
}

#website_article_1{
	display:block;
}

.website_article p{
	text-align:justify;
	padding:0 3%;
	font-size:1.38em;
	font-family:'cabin-regular';
}

.website_article p:first-of-type{
	text-align:center;
}

.website_nav_pressed{
	background:white !important;
}

.website_nav_pressed p{
	color: rgb(0, 137, 116) !important;
}

#drag_n_drop{
	width:64%;
	height:93%;
}

.drag_n_drop{
	position:absolute;
	height:65%;
	width:60%;
	margin-left:20%;
	margin-top:15%;
	display:none;
}

#drag_n_drop_1{
	display: block;
}

.drag_n_drop > div{
	display:inline-block;
	float:left;
}

.drags{
	position:absolute;
}
.drops{
	width:60%;
	height:100%;
	-webkit-transition:all 0.5s ease;
	-transition:all 0.5s ease;
	-ms-transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
}

.drags{
	width:39%;
	left:61%;
	top:7%;
	height:89%;
}

.drops div{
	width:95%;
	height:25%;
	background:rgba(72, 152, 145, 0.5);
	border-radius:10px;
	margin-bottom:5%;
	margin-left:2.5%;
	border:solid 2px #489891;
}

.drops p{
	margin:0;
	font-family:'cabin-regular';
	font-size:1.3em;
	text-align:justify;
	padding:1% 3%;
	position: relative;
  	top: 50%;
  	transform: translateY(-50%);
}

.drops b{
	font-size:1.1em;
}

.drops div:first-of-type{
	margin-top:6%;
}

.drags div{
	width:100%;
	height:20%;
	background:#489891;
	border-radius:10px;
	position:absolute;
	border:solid 2px #308A82;
}

.drags div:first-of-type{
	top:4%;
}

.drags div:nth-of-type(2){
	top:40%;
}

.drags div:last-of-type{
	top:75%;
}

.transition{
	transition:all 0.75s ease;
	-webkit-transition:all 0.75s ease;
	-moz-transition:all 0.75s ease;
	-ms-transition:all 0.75s ease;
}

.dropped{
	background:#489891 !important;	
	border:solid 2px #308A82 !important;
}

.dropped p{
	color:white;
	text-align:center;
	font-size:3em;
	position: relative;
  	top: 50%;
  	transform: translateY(-50%);	
}

.highlight{
	background:#489891 !important;
}


.drags p{
	font-family:'cabin-regular';
	color:white;
	text-align:center;
	font-size:1.6em;
	position: relative;
  	top: 20%;
  	transform: translateY(-50%);
}

.drags div:hover{
	cursor:pointer;
	opacity:0.85;
}

.small_font{
	font-size:1.2em !important;
}

#table{
	width:100%;
	height:100%;
	background:whitesmoke;
	border-radius:15px;
	display: none;
}


#table_header{
	width:100%;
	height:15%;
	background:rgba(14, 119, 110, 0.8);
	border-radius:15px 15px 0 0;
}

#table_header p{
	margin:0;
	color:white;
	font-family:'cabin-regular';
	font-size:1.7em;
	padding:0.8% 2%;
	text-align:justify;
}

#table_body{
	width:100%;
	height:85%;
	border-radius:0 0 15px 15px;
}

.row{
	height:32%;
	width:100%;
	margin-bottom:0.8%;
	background:rgba(14, 119, 110, 0.5);
	
}

.row:last-of-type{
	border-radius:0 0 15px 15px;
}

.row_title{
	width:20%;
	height:100%;
}

.row_title p{
	font-family:'big-noodle';
	font-size:2.5em;
	color:#124747;
	position: relative;
  	top: 26%;
  	padding:0 10%;
  	transform: translateY(-50%);	
}

.row > div{
	display:inline-block;
	float:left;
}

.row_info_container{
	width:80%;
	height:100%;
	overflow-y:scroll;
	overflow-y:hidden;
	position:relative;
}

.row:last-of-type .row_info_container{
	width:80%;
}

.row_info{
	position:absolute;
	display:inline-block;
	vertical-align:top;
	width: 500px;
	height:100%;
	background:rgba(14, 119, 110, 0.5);
	margin-right:1%;
}

.row_info:nth-of-type(2){
	left:48%;
}

.row_info:nth-of-type(3){
	left:96%;
}

.row_info:nth-of-type(4){
	left:144%;
}

.row_info p{
	font-family:'cabin-regular';
	font-size:1.5em;
	padding:0 3%;	
	color:#124747;
	text-align:justify;
}

#table .btn_home{
	bottom:0;
	left:95%;
}

.flip-container{
	position:absolute;
	height:95%;
	top:2.5%;
	left:50%;
	width:38%;
	cursor:pointer;
	perspective: 1000;
	display:none;
}

.flip-container:first-of-type{
	z-index:4;
	display:block;
}

.flip-container:nth-of-type(2){
	z-index:3;
}

.flip-container:nth-of-type(2){
	z-index:2;
}

.flip-container:last-of-type{
	z-index:1;
}

.flipper {
	transition: 1.5s;
	transform-style: preserve-3d;
	height:100%;
	width:100%;
	transform-origin: 0% 0%;
}

.front, .back {
	backface-visibility: hidden;
	position:absolute;
	height:100%;
	width:100%;
}

.front img{
	height:100%;
}

.back img{
	height:100%;
}


.front {
	z-index: 2;
	transform: rotateY(180deg);
	height:100%;
}

.flipper div{
	width:100%;
	height:100%;
}