/* ########################################################################################### */
/* ########################################################################################### */
/* ##############################    DESKTOP STYLES           ################################ */
/* ########################################################################################### */
/* ########################################################################################### */


html {
width: 100%;
height: 100%;
background:#d5d3cd;
background: #e22113;
color: #fff;
font-size: 100px;

}


body {
position: relative;
width: 100%;
height: 100%;
margin: 0;
font-family: 'corbeau_medium';
font-weight: normal;
font-size: 14%;
font-style: normal;
color: #fff;
overflow-y: scroll;
overflow-x: hidden;
z-index: 2;

text-align: center;


-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

}




#top_over_fade {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background:#d5d3cd;
float: left;
display: block;
z-index: 355;

opacity: 1;


-moz-transition-duration: 1.3s;
-o-transition-duration: 1.3s;
-webkit-transition-duration: 1.3s;
transition-duration: 1.3s;

}


#top_over_fade.fade {
opacity: 0;
background: #fff;

}

#top_over_fade.fade.none {
opacity: 0;
display: none;

}







/* ########################################################################################### */
/* ########################################################################################### */
/* ##############################         FONT FACES          ################################ */
/* ########################################################################################### */
/* ########################################################################################### */


@font-face {
font-family: 'corbeau_medium';
src: url('../fonts/c_medium.eot');
src: url('../fonts/c_medium.eot?#iefix') format('embedded-opentype'),
url('../fonts/c_medium.woff') format('woff'),
url('../fonts/c_medium.ttf') format('truetype');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'corbeau_bold';
src: url('../fonts/c_bold.eot');
src: url('../fonts/c_bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/c_bold.woff') format('woff'),
url('../fonts/c_bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;

}


@font-face {
font-family: 'jenevers';
src: url('../fonts/jenevers_regular.eot');
src: url('../fonts/jenevers_regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/jenevers_regular.woff') format('woff'),
url('../fonts/jenevers_regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;

}



@font-face {
font-family: 'imperial';
src: url('../fonts/imperial.eot');
src: url('../fonts/imperial.eot?#iefix') format('embedded-opentype'),
url('../fonts/imperial.woff') format('woff'),
url('../fonts/imperial.ttf') format('truetype');
font-weight: normal;
font-style: normal;

}




/* ########################################################################################### */
/* ########################################################################################### */
/* ####################################      BASICS     ###################################### */
/* ########################################################################################### */
/* ########################################################################################### */





table {
padding: 0;
margin: 0;
border-spacing: 0px;

width: 100%;
height: 100%;
	
}

tr {
width: 100%;
height: 100%;

}


td {
margin: 0;
padding: 0;
border-spacing: 0px;

width: 100%;
height: 100%;

text-align: center;
vertical-align: middle;

-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;

}


div {
font-size: 100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;


vertical-align: top;

}


a, a:visited {
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
text-decoration:none;
color: inherit;
width: auto;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */



 -moz-transition-duration: 0.3s;
 -o-transition-duration: 0.3s;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;

}


a:hover {
text-decoration:none;

}


h1, h2, h3, h4, h5, h6 {
font-family: 'jenevers' , Tahoma, Geneva, sans-serif;
margin: 0px 0 4px 0px;

}


#thin {
font-family: 'corbeau_thin', Tahoma, Geneva, sans-serif;
}


strong {
font-family: 'jenevers', Tahoma, Geneva, sans-serif;
font-weight: 100;
}



button {

-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;


}


::-moz-selection { 
background: #fff; 
color: #111;
}

::selection { 
background: #fff;
color: #111;

}



/* #############   IMAGES AND VIDEO   ###############  */


img {
margin: 0;
padding: 0;
display: block;
border: none;
width: auto;

}



/* ########################################################################################### */
/* ########################################################################################### */
/* ##############################            CHOICE           ################################ */
/* ########################################################################################### */
/* ########################################################################################### */

#intro_screen {
position: absolute;
display: block;
width: 100%;
height: 100%;

background: #d24717;
background: #e22113;

color: #fff;

float: left;

top: 0px;
left: 0px;

z-index: 33;

overflow: hidden;


}


#love_btn,
#goodwill_btn {
display: inline-block;
color: #111;
color: #fff;

width: 215px;
text-align: center;

background: #fff;

background: #ee501a;

border-radius: 4px;

padding: 15px;
font-size: 18px;

margin: 0 10px 0 10px;

cursor: pointer;

border: 0px solid #fff;

border-width: 0px;

font-family: 'corbeau_medium';
letter-spacing: 0.5px;




}


#love_btn:hover,
#goodwill_btn:hover {
background: #f28607;

}


#love_btn:focus,
#goodwill_btn:focus {
outline: none; 

}



/* ########################################################################################### */
/* ########################################################################################### */
/* #############################      INSTRUCTIONS (SPLASH)      ############################# */
/* ########################################################################################### */
/* ########################################################################################### */



#instructions_holder {
position: absolute;	
display: block;
width: 100%;
height: 0%;

background: #fe551b;
padding: 0 5%;
float: left;

top: 0px;
left: 0px;

z-index: 37;

overflow: hidden;


 -moz-transition-duration: 0s;
 -o-transition-duration: 0s;
 -webkit-transition-duration: 0s;
 transition-duration: 0s;

text-align: center;

}


/* ########################################################################################### */
/* ########################################################################################### */
/* ##############################              HOME           ################################ */
/* ########################################################################################### */
/* ########################################################################################### */


#bg {
position: fixed;
display: block;
width: 100%;
height: 100%;

background: #d24717;
background: #e22113;
background-size: cover;
background-position: center center;



}


#page_holder {
position: relative;
display: inline-block;

width: 100%;

max-width: 1044px;


margin: 0 auto;

padding: 125px 0 0 0;



}



#sidebar {

display: inline-block;

width: 40%;
height: auto;

top: 125px;
left: 0px;

float: left;
z-index: 3;

padding: 45px;

line-height: 1.6;
letter-spacing: 0.5px;

font-family: 'corbeau_medium';

font-size: 18px;

text-align: left;


}


#feed {

display:inline-block;

top: 125px;

left: 30%;

width: 60%;

padding: 45px;

float: left;
z-index: 3;


text-align: left;


}



.post {
display: none;
width: 100%;
height: auto;

margin: 0 0 90px 0;



}


.post_date {
display: block;
width: 100%;

text-align: left;

line-height: 1.6;
letter-spacing: 0.5px;

font-family: 'corbeau_medium';

font-size: 18px;

margin: 0 0 11px 0;

}

.content {
display: block;
width: 100%;
margin: 0 auto;

text-align: left;

line-height: 1.6;
letter-spacing: 0.5px;

font-family: 'corbeau_medium';

font-size: 18px;



}

.content img {
display: block;
width: 100%;
height: auto;

}



#mobile_notice {
display: none;

}



/* ########################################################################################### */
/* ########################################################################################### */
/* ##############################            SABBATH          ################################ */
/* ########################################################################################### */
/* ########################################################################################### */

#sabbath {
position: fixed;
display: block;

width: 100%;
height: 100%;

float: left;
z-index: 333;

top: 0px;
left: 0px;

background: #d24717;
background: #e22113;

color: #fff;


}

#sabbath_inside {
display: inline-block;

font-size: 20px;

font-family: 'corbeau_medium';

letter-spacing: 0.5px;
line-height: 1.4;


}



/* ########################################################################################### */
/* ########################################################################################### */
/* ########################################################################################### */
/* ########################################################################################### */
/* ########################################################################################### */
/* ########################################################################################### */
/* ########################################################################################### */
/* ########################################################################################### */
/* ##############################                             ################################ */
/* ##############################                             ################################ */
/* ##############################     RESPONSIVE  STYLES      ################################ */
/* ##############################                             ################################ */
/* ##############################                             ################################ */
/* ########################################################################################### */
/* ########################################################################################### */
/* ########################################################################################### */
/* ########################################################################################### */
/* ########################################################################################### */
/* ########################################################################################### */
/* ########################################################################################### */
/* ########################################################################################### */


/* Small */
@media (min-width: 10px) {

#page_holder {
padding: 25px 0 0 0;

}

#sidebar {

top: 50px;
left: 0px;

}


#feed {
top: 50px;




}





}






/* ##########################################  LAPTOP BEGINS ##################################################  */



@media (min-width: 1250px) {

#page_holder {
padding: 50px 0 0 0;

}


#sidebar {

top: 100px;


}


#feed {
top: 100px;



}




}


/* ##########################################  DESKTOP BEGINS ##################################################  */



@media (min-width: 1455px) {

#page_holder {
padding: 125px 0 0 0;

}

#sidebar {

top: 125px;

}


#feed {
top: 125px;




}

}



/* ##########################   MID DESKTOP VERSION  #################################### */




@media (min-width: 1535px) {




}





/* ##########################   LARGE DESKTOP VERSION  #################################### */



@media (min-width: 1635px) {





}