Basic css file and reset.css

core.css

@charset "utf-8";
/* CSS Document */

/* Import open-sans google font 
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic&subset=latin,greek,latin-ext);
*/

/*-  variable
----------------------------------------------------------------------*/
:root{
	--main-bg-color: white;
}

/*-  BASE STYLES
----------------------------------------------------------------------*/
body{
	/*font-family: 'Open Sans', sans-serif !important;*/
	background: var(--main-bg-color);
	font-weight: 400; 
	color: #333;
	padding: 50px;
}

h1  { }
h2  { }
h3  { }
h4  { }
p   { }


a   		{ }
a:hover   	{ }
a:focus		{ }

div { display: block; }
img { width:100%; }
.clear { clear: both; }
.width100 { width: 100%; }
.width75 { width: 75%; }
.width50 { width: 50%; }
.width25 { width: 25%; }

.nopaddings {padding: 0 !important;}
.nolpadding {padding-left: 0 !important;}
.norpadding {padding-right: 0 !important;}
.notpadding {padding-top: 0 !important;}
.nobpadding {padding-bottom: 0 !important;}
.nolrpadding {padding-left: 0 !important;padding-right: 0 !important;}
.notbpadding {padding-top: 0 !important;padding-bottom: 0 !important;}

/* ======================================================================================================
   LAYOUT
   ====================================================================================================== */

/*- HEADER
/*****************************************************************************/ 


/*- NAVIGASI
/*****************************************************************************/ 


/*- CONTENT
/*****************************************************************************/ 



/*- FOOTER
/*****************************************************************************/ 

	
	
/* ======================================================================================================
   MEDIA QUERY
   ====================================================================================================== */

/*********************************************************** GLOBAL RESPONSIVE */
/********************************************************************************** MOBILE POTRAIT ********/
@media (max-width: 480px) and (max-aspect-ratio: 13/9) {

}
/********************************************************************************** MOBILE LANDSCAPE ********/
@media (min-width: 481px) and (max-width: 767px) and (min-aspect-ratio: 13/9) {

}
/********************************************************************************** TABLET POTRAIT ********/
@media (min-width: 768px) and (max-width: 991px) and (max-aspect-ratio: 13/9) {

}
/********************************************************************************** TABLET LANDSCAPE ********/
@media (min-width: 992px) and (max-width: 1199px) and (min-aspect-ratio: 13/9) {

}   

/*********************************************************** WEARABLES */
/* Apple Watch ----------- */
@media
  (max-device-width: 42mm)
  and (min-device-width: 38mm) {
	/* Styles */

}

@media 
  (max-device-width: 218px)
  and (max-device-height: 281px) { 

}


/*********************************************************** iPhones */
/* --------------------------------------------------------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
	/* Styles */
	
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (max-aspect-ratio: 13/9) {
	/* Styles */
	
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-aspect-ratio: 13/9) {
	/* Styles */
	
}

/* --------------------------------------------------------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
	/* Styles */
	
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (max-aspect-ratio: 13/9) {
	/* Styles */
	
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-aspect-ratio: 13/9) {
	/* Styles */
	
}


/* --------------------------------------------------------- iPhone 6 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
	/* Styles */
	
}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (max-aspect-ratio: 13/9) { 
	/* Styles */
	
}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-aspect-ratio: 13/9) { 
	/* Styles */
	
}

/* --------------------------------------------------------- iPhone 6+ ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
	/* Styles */
	
}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (max-aspect-ratio: 13/9) { 
	/* Styles */
	
}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (min-aspect-ratio: 13/9) {
	/* Styles */

}
/*********************************************************** iPads */
/* iPads (portrait) ----------- */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (max-aspect-ratio: 13/9) 
  and (-webkit-min-device-pixel-ratio: 1) {
	/* Styles */

}
/* iPads (landscape) ----------- */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (min-aspect-ratio: 13/9) 
  and (-webkit-min-device-pixel-ratio: 1) {
	/* Styles */
	
}

/*********************************************************** super magic for iPads select only */
_:-webkit-full-screen:not(:root:root), .your-selector-here
{
    /*
      Define here the CSS styles applied only to the Safari 9 version when
      not running in iOS devices (iPhone, iPad, ...)
     */
}

/*********************************************************** Other desktop screen */

/* Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
	/* Styles */
	
}


/* Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
	/* Styles */
	
}

/* Larger screens ----------- */
@media only screen 
and (min-width : 1024px) {
    /* Styles */
 
}

/*********************************************************** Print */
/* Print style ----------- */
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}


/* italic input placeholder
*******************************/
input::-webkit-input-placeholder { font-style: italic; }
input:-moz-placeholder { font-style: italic; } /* FF 4-18 */
input::-moz-placeholder { font-style: italic; } /* FF 19+ */
input:-ms-input-placeholder { font-style: italic; } /* IE 10+ */

/* remove input placeholder
*******************************/
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

/* noscroll
*******************************/
.noscroll { overflow: hidden; }

/* selection css
*******************************/
::selection {
	background: #eac06e; /* Safari */
	color: white;
}
::-moz-selection {
	background: #eac06e; /* Firefox */
	color: white;
}

/* remove outline chorme
*******************************/
textarea:focus,
button:focus,
select:focus,
input:focus {
	outline: 0 !important;
}

/* fix select dropdown
*******************************/
select{
    /*-moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background:  url('../images/icon/select-bg.png') no-repeat right center white !important;*/
}

/* hide input[type=number] spiner
*************************************/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}

/*-  SELF-CLEARING FLOATS
----------------------------------------------------------------------*/

#page-wrap:after
{
	content: "."; 
	visibility: hidden; 
	display: block; 
	height: 0; 
	clear: both;
}


/********
:)
wimpy katana 
*/

reset.css

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}